梅花真洁白啊！像冬天里的雪花；梅花真美丽啊！像翩翩起舞的天鹅；梅花真坚强啊！像个英勇的战士。梅花坚强不屈的精神一直激励着我前进。
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.haodaima.com vue动画</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link rel="stylesheet" rel="nofollow noopener noreferrer" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" />
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',//动画进入
leaveClass:'zoomOutRight'//动画离开
}
}
});
</script>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.haodaima.com/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
以上就是vue动画效果如何实现方法示例。世人贪婪，总想寻找两全，但这世间难有什么两全之策。人生百年，不过是教人如何取舍。更多关于vue动画效果如何实现方法示例请关注haodaima.com其它相关文章！
