Vue 1.0动画

Vue 1.0动画（自定义动画）

步骤：

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

　　2.给动画名称写css定义

　　　　a: .fade-transition{/*定义动画过渡*/   transition:1s  all ease;}

　　　　b: .fade-enter{/*定义进入动画  注意：进入离开最终一样*/}

　　　　c：fade-leave{/*定义离开动画*/}

html 如下：　　　

<div id="wrap">
    <input type="button" value="按钮" @click="show">
    <div class="box" v-show='isShow'  transition='fade'></div>
</div>

.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

<div id="box2">
        <input type="button" value="按钮" @click='show'>
        <div id="div2"  class="animated"  v-show='isShow' transition="bounce">
        </div>
</div>

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"
           }
       }
 })