vue动画

一、过渡实现动画

<input type="button" value="btnflag" @click="flag=!flag">
<transition><h1>这是一个标签</h1></transition>
<-- style -->
<style>
//起始状态，动画还没开始
.v-enter,
//动画离开时候，离开的终止状态
.v-enter-to,
//入场动画的时间段
.v-enter-active{
opacity:0;
translateX(150px);
},
//动画离开的时间段
.v-leave-active{
transition; all 0.8s ease;
},


<style/>

笔记：当页面有多个transition的时候，给transition加一个name属性，然后把v-enter换成：name属性值-enter即可区分各自的动画效果
**

二、第三方类animate.css实现动画

1、引入animate.css
2、在transition标签上使用animate的class动画效果

这是一个标签

注意：一定要在前边使用animated类样式，放在元素身h1标签也可以，此时transition的animated样式就不必要写了
duration设置离开和入场的时间