vue-transtion交互(也叫作动画)

<style>

#div1{

width:100px;

height:100px;

background:red;

}

.fade-transition{

trnsition:1s all ease;

}

.fade-enter{

opacity:0;

}

 

.fade-leave{

 

opacity:0;

}

</style>

<div id="div1" v-show="bSign" transition="bounce"></div>

 

利用animate.css(从cdn中下载)

<link rel="stylesheet" href="../css/animate.css"/>

<style>

#div1{

width:100px;

height:100px;

background:red;

}

</style>

<div id="box">

<button type="button" v-on:click="show">点击</button>

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div><!--其中的animated是animate.css中的css样式-->

</div>

 

 

var vm=new Vue({

el:"#box",

data:{

bSign:false

}

methods:{

show:function(){

this.bSign=!this.bSign;

}

},

trnsitions:{

  bounce:{

    enterClass:'zoomInLeft',

    leaveClass:'zoomOutRight'

  }

}

})

posted @ 2018-06-03 16:17  luoye7121  阅读(525)  评论(0编辑  收藏  举报