vue过渡效果 概述

vue的封装组件transition:

为某个模块添加动画效果，直接在那个div里面添加一个属性transition="自己命名的名字"

fade">为我添加一个渐入渐出的效果

样式

div.fade-transition{opacity:1;}       //不透明

div.fade-enter,.fade-leave{opacity:0}   //透明

只要是有动画效果的都要写这个组件里面

      name="A">

        toggle

    

渐变效果：

样式. A-enter-active，.A-leave-active{   // toggle

这个元素激活时动画效果

  transition:opacity  1s;     //opacity是有渐变效果的样式的名称

}

.A-enter，.A-leave{  // toggle

这个元素进入和离开时动画效果

  opacity：0;

}

动画效果：

样式. A-enter-active，.A-leave-active{   //这个元素激活时动画效果

  animation:bunde-in 1s;     //bunde-in是有动画效果的样式的名称。自己命名的

}

.A-enter，.A-leave{  //进入和离开时动画效果

  animation：bunde-in 1s;     //bunde-out同上

}

@keyframes bounce-in {
  0% {
  transform: scale(0);
  }
  50% {
  transform: scale(1.5);
  }
  100% {
  transform: scale(1);
  }
}

@keyframes bounce-out {
   0% {
    transform: scale(1);
  }
  50% {
  transform: scale(1.5);
  }
  100% {
  transform: scale(0);
  }
}

过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。