vue中动画分布解析

2020-12-01 16:19:26

参考连接 https://blog.csdn.net/qq_37977455/article/details/104765789

transition分为以下 六个阶段：

  • enter, enter-active, enter-active-to,

  • (开始 进入阶段的)第1帧 属性值，到 (默认属性值 的过渡阶段)，移除enter动画，

  • leave, leave-active, leave-active-to

  • (开始 离开 阶段的)第1帧 默认属性值，到 (属性值 的过渡阶段)，移除leave动画
    示例图(非重点)-仅供参考

2种使用：

// html
<transition name="slide"></transition>12
 /* 正常状态下detail组件默认为transformX(0) */
.slide-enter,
.slide-leave-to {
  transform : translateX(100%);
}
.slide-enter-active,
.slide-leave-active { transition: all .6s;}1234567

不考虑过渡速率，与下同，

@keyframes slideMove{
    0%{ transform : translateX(100%); }
    100%{ transform : translateX(0); }
}
.slide-enter-active { animation: .6s slideMove;}
.slide-leave-active { animation: .6s slideMove reverse;} /* 动画顺序翻转 */


  • 精彩推荐

  • 2020-01-16 08:52:22

    Vue函数式调用组件创建公共组件

    所有组件都需要这么去调用，就会有些许麻烦而且不太美观。像Loading、Toast等这些组件，一页面可以经常用到而且每次显示的内容都可能不一样，这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多，而且代码也更整洁。

  • 2020-01-17 08:37:26

    css transition分别指定多个属性

    transition有四个属性，很多人都会遗忘，分别是transition-property，transition-duration，transition-timing-function，transition-delay，尤其是transition-delay，这个可以实现延迟动画

  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外，我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面，下面的文章大家也可以通过判断path的长度来计算rank值，不用有意自定了 这样做的好处有两点，一个就是前进刷新，后退不刷新，还有就是，如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。

  • 2020-01-17 21:20:06

    Nuxt重要点介绍和记录

    nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。

  • 2020-01-17 21:21:42

    nuxtjs打包优化

    然后你再使用 npm run build 打包的时候，会弹出一个界面 当然了，它第一次出来的时候我立马关了，这啥玩意？？？别着急你慢慢的品，慢慢的看。 原来 这是打包后的JS，面积的大小就是体积的大小。这样我们一目了然的看到了到底那里大了