vue动画与组件

一、vue动画

vue动画有三种来源：

• vue原生动画（官网动画介绍https://cn.vuejs.org/v2/guide/transitions.html）
  • 需要一个可切换的元素
  • 需要动画的元素用transition标签包裹
  • 编写动画样式
• 第三方animation.css
• 半场动画
• 动画防止第一个动画未完成就产生第二个动画：在transition里面加上属性：mode:"out-in"

1.vue原生动画

编写动画时，只需写v-enter与v-leave-to的组和v-enter-active，v-leave-to的组即可
例：

<style>
      .v-enter,.v-leave-to{
   
        opacity:0;
        transform: translateX(150px);/* 从150x轴平移过来 */
      }
      .v-enter-active,.v-leave-to{
   
        transition: all .3s ease;/*0.3s的时间速度雨来越慢*/
      }
    </style>

注意在有多个动画元素时，可以给transition标签加上id（如x）则x的动画样式设置就是x-enter等，而没取名字的就是默认的v-

2.第三方animate.css库

1. 一个可切换元素
2. transition标签包裹动画元素

<transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight">
        <!-- animated是所有animate.css的基础类，不设置的动画效果没有用 -->
        <div v-show="flag" class="animated">动画元素</div>
      </transition>

4. 引入animate.css样式库并设置进入离开样式即可

<link rel="stylesheet" href="./node_modules/animate.css/animate.css">

设置样式类：

<transition enter-active-class="fadeInRight" leave-active-class=