vue.js过渡&动画看着官方文档的一些小demo

单元素或组件的过渡

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

2.如果过渡组件提供了 Javascript 钩子函数，这些钩子函数将在恰当的时机被调用。

3.如果没有找到 Javascript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

CSS过渡

.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}


CSS动画

.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}


自定义过渡的类名

显性的过渡持续时间

...

...

Javascript 钩子

v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>


// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}

多个元素的过渡

对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素

当items中没有内容的时候，

当有相同标签名的元素切换时，Vue为了效率只会替换相同标签内部的内容，因此给在组件中的多个元素设置key是一个更好的实践

过渡模式

这个部分的代码如下：

.fade-enter{
transform: scale(0);
}
.fade-enter-actice{
transition: all 0.5s ease;
}
.fade-enter-to{
transform: scale(1);
}
.fade-leave{
transform: scale(1);
}
.fade-leave-active{
transition: all 0.5s ease;
}
.fade-leave-to{
transform: scale(0);
}



多个组件的过渡
上述代码改为：

列表过渡和动态过渡就看官方文档的demo啦