本文实例讲述了vue动画效果实现方法。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net vue动画& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.4.4/vue.min.js "祝辞& lt;/script>
& lt;链接rel="样式表" href=" https://cdn.bootcss.com/animate.css/2.0/animate.css " rel=巴獠縩ofollow”/比;
& lt; style>
#箱{
宽度:400 px;
保证金:0汽车;
}
# div1 {
宽度:100 px;
身高:100 px;
背景:红色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/按钮”@click=扒谢弧北?
& lt; div id=" div1 " class="动画" v-show=癰Sign”=胺吹惫勺４? lt;/div>
& lt;/div>
& lt; script>
新Vue ({
埃尔:“#箱”,
数据:{
bSign:真
},
方法:{
切换(){
this.bSign=! this.bSign;
}
},
过渡:{//定义所有动画名称
反弹:{
enterClass:“zoomInLeft ',//动画进入
leaveClass:“zoomOutRight”//动画离开
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
之前
运行效果:
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
