vue2.0过度动画

Posted 2020-11-01 lingling144

vue在插入、更新或移除dom时，提供了多种不同方式的应用过度效果。

包括以下工具：

　　在css过渡和动画中自动应用class.

　　可以配合使用第三方css动画库，如animate.css

　　在过渡钩子函数中使用javascript直接操作DOM

　　可以配合使用第三方javascript动画库，如Velocity.js

一、单元素/组件的过渡

Vue提供了transition的封装组建，在下列情形中，可以给任何元素和组建添加进入/离开过度

　　条件渲染（使用if）

　　条件展示（使用v-show）

　　动态组建

　　组件根节点

 

.cart-decrease{

opacity:1;
transform:translate3D(0,0,0);
&.move-enter-active{
  opacity:1;
  transform:translate3D(0,0,0);
  transition:0.5s all;
}
&.move-enter{
  opacity:0;
  transform:translate3D(24px,0,0);
}
&.move-leave{
  opacity:1;
  transform:translate3D(0,0,0);
}
&.move-leave-active {
  opacity:0;
  transform:translate3D(24px,0,0);
  transition:0.5s all;
}

元素进入动画从enter到enter-active,离开动画从leave到leave-active，