vue如何使用原生js写动画效果_vue动画效果实现方法示例

本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下：

www.jb51.net vue动画

#box{

width:400px;

margin: 0 auto;

}

#div1{

width:100px;

height:100px;

background: red;

}

new Vue({

el:'#box',

data:{

bSign:true

},

methods:{

toggle(){

this.bSign=!this.bSign;

}

},

transitions:{ //定义所有动画名称

bounce:{

enterClass:'zoomInLeft',//动画进入

leaveClass:'zoomOutRight'//动画离开

}

}

});

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。