Vue 1.0动画
2019-11-12

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