VUE 过渡和动画的一些区别和个人理解

Vue官方的语言实在令我难以理解,于是自己写了一个demo,才能彻底理解官方文档.我想总结一下

概念:

过渡(Transitions)

运用到了css中的transition属性因此得名(个人理解)

我将过渡(Transitions)分为"出现"和"消失"两大块(动画Animations同理)

Vue将过渡(Transitions)定义了6个class类名,如下:

1. "出现"
   v-enter : "出现""开始的样子
   v-enter-active : "出现"过程的定义(时间,延迟和曲线函数)
   v-enter-leave : "出现"最后的样子
2. "消失"
   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)的"出现"和"消失"里面的三个类是不能分开的,同生死的.

如果错误,请多多指教~