vue教程3-02 vue动画
2017-04-28 10:56
441 查看
vue教程3-02 vue动画
以下代码,已经用包管理器下载好vue,animate
以下代码,已经用包管理器下载好vue,animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <link rel="stylesheet" href="bower_components/animate.css/animate.css"> <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>
相关文章推荐
- Vue.js 系列教程 5:动画
- vue教程1-02 data里面存储数据
- [转]Ultra Fractal教程系列44——动画功能的使用02——制作一个缩放动画
- vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak
- Vue.js 系列教程 5:动画
- Vue.js 系列教程 5:动画
- Vue.js 系列教程 5:动画
- Eclipse+MyEclipse+Struts+Hibernate+MySql动画系列教程下载
- Eclipse+MyEclipse+Struts+Hibernate+MySql动画系列教程下载
- javascript基础的动画教程,直观易懂
- Javascript & DHTML 实例编程(教程)(四)初级实例篇2―动画
- PSP 编程 教程01-02
- 黑客零起点一日一动画教程下载!
- DirectX5.0最新游戏编程指南 DirectDraw教程篇 三、创建动画
- Javascript & DHTML 实例编程(教程)(四)初级实例篇2―动画
- javascript基础的动画教程,直观易懂
- Eclipse+MyEclipse+Struts+Hibernate+MySql动画系列教程下载
- 速动画教程系列第八集 Hibernate的一对多关联关系
- 漂亮的星星动画:Jeff Molofee(NeHe) 的 OPENGL 教程-第九课
- 提供网吧破解动画教程及其工具下载