织梦小程序网站模板_vue动画效果完成方法示例

vue动画效果实现方法示例     -M   这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下
title vue动画 /title script src="vue/2.4.4/vue.min.js" /script link rel="stylesheet" href="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" 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代码运行工具:测试上述代码运行效果。

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mfjzn.cn/ziyuan/3179.html