vue 动画效果2 过渡

要点：

 代码：

.showTodoList-enter,.showTodoList-leave-to{
  transform: translateX(-100%);
}
.showTodoList-enter-to,.showTodoList-leave{
  transform: translateX(0);
}
.showTodoList-enter-active,.showTodoList-leave-active{
  transition: 0.5s linear;
}

vue再给我们来的时候给我们了三个为.name-enter .name-enter-to .name-enter-active

离开时给我了三个 .neam-leave .name-leave-to .name-leave-active

 

 

1中我们通过写了@keyframes 再使用v-enter-active和v-leave-active 实现了动画

 

而我们这边使用过渡把@keyframes代替掉

这边写元素来的时候,.hello-enter时进入的起点即黄色的位置,hello-enter-to表示元素到进入终点的时候即绿色的位置,分别再对应位置上写上元素的状态

但是如果直接这样写会发现没有缓慢推出的动画的效果,因为再之前的写法中就写了对应来和去动画效果

 

 配置过渡效果：然后在哪个元素需要进行动画样式的配置,就在哪个元素的样式上加上 transition:0.5 linear

再补上离开的.hello-leave .hello-leave-to （注意起点和终点要与来的时候相反）

可以进行精简的写法 发现进入的起点的样式与离开的终点样式一样,进入的终点与离开的起点一样

就可以合并起来写

 或者把前面的过渡样式写在.hello-enter-active,.hello-leave-active里面