vue 1.0 结合animate.css定义动画效果

Vue 1.0 动画（自定义动画）

步骤：

1.给当前动画元素添加‘transition'属性  其值就是动画名称(假如：fade)

2.给动画名称写css定义

a: .fade-transition{   transition:1s  all ease;}

b: .fade-enter{}

c：fade-leave{}

html 如下：

 
 

.box{
 width:100px;
 height:100px; 
}
.fade-transition{ 
 transition:1s all ease; 
}
.fade-enter{ 
 opacity:0; 
}
.fade-leave{
 opacity:0;
 transform:translate(200px) 
}

js

var vm=new Vue({
　　el:'#box',
　　data:{
　　　　isShow:true
　　},
　　methods:{
　　　　show(){
　　　　　　this.isShow=!this.isShow;
　　　　}
　　}
});

vue 1.0 结合animate.css定义动画

页面记得引入animate.cdd

html

css

#div2{
 width: 100px;
 height: 100px;
 background: red;
 margin: 50px auto;
}

js

var vm2=new Vue({
  el:'#box2',
   data:{
   isShow:true,
   },
   methods:{
    show(){
     this.isShow=!this.isShow;
    }
  },
  transitions:{
   bounce:{
   　　enterClass:"zoomInLeft",
   　　leaveClass:"zoomInRight"
   }
  }
 })

总结

以上所述是小编给大家介绍的Vue 1.0自定义动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！