Vue笔记（10） - vue的动画

https://cn.vuejs.org/v2/guide/transitions.html

1、单元素/组件的过渡

Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

当插入或删除包含在 transition 组件中的元素时，Vue 会自动将过渡的类名按时机添加到元素中。至于过渡的类名的具体内容需要自己定义。

2、过渡的类名

（这些类会自动添加到transition标签中）
在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用可以重置前缀，比如 v-enter 替换为 my-transition-enter。（比如说我不想每一个transition都用上面一套动画，而是要用另一个）

3、自定义过渡的类名

我们可以通过以下特性来自定义过渡类名（嗯，以下是transition标签的特性，而不是类名，与上面的不同）：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

4、一开始就动画

要想在页面一打开时就有动画，可以给transition标签添加：appear属性，并且添加appear-active-class特性指定具体动画：


        hello

animate.css的动画是由keyframes封装来的，我们知道，keyframes本来就是一开始就有动画，所以可以自己添加类让它一开始就有动画。

hello

5、同时应用过渡和动画

.v-enter-active, .v-leave-active {
    transition: opacity 1s;
}

.v-enter, .v-leave-to {
    opacity: 0;
}
...
enter-active-class="animated swing v-enter-active"
leave-active-class="animated shake v-leave-active"

过渡类名的命名还是要用上面说规定的，然后内容还是要自己定义，并且还要手动添加到特性中了。
当同时有动画和过渡时，那总时长怎么算呢？
我们可以规定按过渡的算，在标签上添加：

type='transition'

6、自定义动画的时长

本来动画时长在animate.css中写死了，当我们想自己规定但又不修改源码时，可以设置：

:duration:'10000'

单位是毫秒，另外还可以设置进场和离场时的时长：

:duration= "{enter: 3000, leave: 3000}"

感觉这样搞得很乱啊，这波不太舒服。靠。