vue操作动画的记录animate.css实例代码

<transition @before-enter='beforeenter' @enter='enter' @after-enter='afterenter'>
//其中duration是绑定动画的时间
<h3 v-if='flag' >这里是动画的内容</h3>
</transition >
var vm=new vue({
  el:'#app',
 data:{
  return {
  flag:false
  }
 },
 methods:{
 //注意:动画钩子函数的第一个参数:el,表示要执行动画的那个dom元素,是个原生的js dom对象
 beforeenter(el){
   //这个是表示动画入场之前,此时,动画尚未开始,可以在beforeenter中,设置元素开始之前的起  始样式
   //设置小球开始动画之前的,起始位置.
   el.style.transform="translate(0,0)";
   
 },
 enter(el,done){
  //强制重绘 刷新
  el.offserwidth;
   //enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后,结束状态
   
   el.style.transform="translate(150px,450px)";
  el.style.transition="all 1s linear";
  //立即消失done()方法 ,其实就是afterenter()函数的引用
  //el.addeventlistener('transitionend', done);监听动画完成后执行
  done()
  },
 afterenter(el){
 //动画完成之后,会调用afterenter
   this.flag=! this.flag
 }
 }
 
})