Vue官方的语言实在令我难以理解,于是自己写了一个demo,才能彻底理解官方文档.我想总结一下
概念:
过渡(Transitions)
运用到了css中的transition属性因此得名(个人理解)我将过渡(Transitions)分为"出现"和"消失"两大块(动画Animations同理)
Vue将过渡(Transitions)定义了6个class类名,如下:
- "出现"
v-enter : "出现""开始的样子
v-enter-active : "出现"过程的定义(时间,延迟和曲线函数)
v-enter-leave : "出现"最后的样子 - "消失"
v-leave: "消失""开始的样子
v-leave-active : "消失"过程的定义(时间,延迟和曲线函数)
v-leave-leave : "消失"最后的样子
官方的例子:
//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;
}//js show默认是false
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>官方的例子中,css只定义了4个过渡css,说好的6个状态呢?我是一脸懵逼,而且动起来还很流畅.
1.缺失的第一个状态:v-enter-leave
过渡"出现"动画结束后,他会展示DOM元素,
官方省略了"v-enter-leave",因为这个DOM元素展示的样子也正是我们"v-enter-leave"想要的效果,因此省略且不会影响动画效果
2.缺失的第二个状态:v-leave
过渡"消失"开始的第一帧也真是我们DOM元素的样子,因此省略且不会影响动画效果
从上面的例子我们也得出了,原来过渡和DOM元素其实是没有什么关系的,我们可以将过渡和DOM出现完全分开.
1."出现"流程走一遍
2.DOM元素出现
3.'消失'流程走一遍
后面提到的动画(Animations)也是此流程
动画(Animations)
运用到了css中的animation属性因此得名(个人理解)正如官方所说,动画和过渡相同,唯一的区别是:
动画与过渡的区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
官方代码:
.bounce-enter-active {
animation: bounce-in 10s;
}
.bounce-leave-active {
animation: bounce-in 10s reverse;
}
@keyframes bounce-in {
0% {//这里起是就相当于 v-enter
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}WF??完全不懂,上面的话我理解了很久..在区别中解释这句的理解
区别
1.过渡(Transitions)和动画(Animations)使用的css属性不同
2.动画(Animations)里面的0% 其实就相当于过渡(Transitions)的v-enter,这样就好理解了官方的那句话了,动画(Animations)过程中的0% 在"出现"或者"消失"完毕之后是一直存在的,直到"出现"或"消失"结束后才被去除.
再换一种粗略的说法,过渡(Transitions)的"出现"和"消失"里面的三个类是可以分开一步一步走的,
而动画(Animations)的"出现"和"消失"里面的三个类是不能分开的,同生死的.
如果错误,请多多指教~
