定义动画的方法有三种：
CSS transition
CSS animation
JavaScript 函数
CSS Transition
要使用 CSS Transition 动画，只需要在目标元素上添加 v-transition 指令：
Hello!
然后，你需要为目标元素定义两个 CSS 类： .v-enter 和 .v-leave . 这其中：
.v-enter 代表元素刚刚被插入 DOM 瞬间的状态。它会在插入前被添加，然后 Vue.js 会强制浏览器刷新视图，然后 v-enter 会被立刻移除，从而触发 transition。
.v-leave 代表元素即将被从 DOM 中移除的瞬间的状态。Vue.js 会在侦听到 transitionend 事件以后移除它。
需要注意的是你得确保该元素在添加这两个类的时候会触发 CSS transition，不然 Vue.js 侦听不到 transitionend 事件，动画就卡在那里了。
.msg {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
.msg.v-enter, .msg.v-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
现在，当 show 变化的时候，Vue.js 会插入/移除该元素，并自动在合适的时候添加 CSS 类。效果： http://jsfiddle.net/yyx990803/7Q9ss/
CSS Animation
CSS Animation 使用方式和 transition 大同小异，换成使用 v-animation 指令，不同的地方是 v-enter 现在不是在插入后立刻移除，而是在侦听到 animationend 事件后才移除。
Look at me!
CSS 里你需要定义两个动画 keyframes，分别对应进场和出场动画：（这里省略了webkit前缀）
.animated {
display: inline-block;
}
.animated.v-enter {
animation: fadein .5s;
}
.animated.v-leave {
animation: fadeout .5s;
}
@keyframes fadein {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes fadeout {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
效果： http://jsfiddle.net/yyx990803/XLxpb/
JavaScript 函数动画
JS 函数动画需要通过 Vue.effect 方法来注册一个效果，包括一个进场函数和一个出场函数：
Vue.effect('my-effect', {
enter: function (el, insert, timeout) {
// insert() 会将元素插入 DOM
},
leave: function (el, remove, timeout) {
// remove() 会将元素移除出 DOM
}
})
第三个参数 timeout 是一个 Vue.js 版本的 setTimeout 函数。使用方法完全一样，但使用这个函数的好处是，当一个元素的状态切换过快，上一个动画函数设置的 timer 还没有触发就进入下一个动画函数的时候， Vue.js 会确保之前未触发的 timer 都被取消，不需要开发者手动管理 timer。
网友评论