vue中的过渡和动画

vue 动画的理解

1、主要操作css中transition和animation；
2、vue给目标元素添加/移除特定的class；
3、过渡的相关类名

xxx-enter:指定进入之前的样式；
xxx-leave-to:指定离开后的样式；
xxx-enter-active:指定进入时的样式
xxx-leave-active：指定离开时的样式

基本过渡动画的编码

1、在目标元素外包裹<transition name=“xxx”>
2、定义 class 样式

指定过渡样式: transition 
指定隐藏时的样式: opacity/其它

过渡的代码示例：

.move-enter-active {
      transition: all 1s
    }
.move-leave-active {
  transition: all 3s
}

.move-enter, .move-leave-to {
  opacity: 0;
  transform: translateX(20px)
}

<transition name="move">
    <p v-show="show">hello</p>
  </transition>

动画的代码示例：

.bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

<transition name="bounce">
    <p v-if="show" style="display: inline-block">Lorem</p>
  </transition>

注意：vue中设置的过渡动画主要用于元素显示隐藏时使用，或是事件触发时使用；如果是周期性的动画，用原生css直接来定义。