vue动画效果实现方法示例


Posted in Javascript onMarch 18, 2019

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue动画</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <link rel="stylesheet" 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>

运行效果:

vue动画效果实现方法示例

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

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

Javascript 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
node.js实现微信开发之获取用户授权
Mar 18 #Javascript
学习node.js 断言的使用详解
Mar 18 #Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 #Javascript
JavaScript显式数据类型转换详解
Mar 18 #Javascript
浅谈js中的bind
Mar 18 #Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 #Javascript
JavaScript中this用法学习笔记
Mar 17 #Javascript
You might like
用PHP读取超大文件的实例代码
2012/04/01 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
js运动事件函数详解
2016/10/21 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python生成指定长度的随机数密码
2014/01/23 Python
python比较2个xml内容的方法
2015/05/11 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python get获取页面cookie代码实例
2018/09/12 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
python re模块和正则表达式
2021/03/24 Python
财务方面个人工作的自我评价
2013/12/28 职场文书
会计助理岗位职责
2014/02/17 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
技术比武方案
2014/05/19 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
作文评语集锦
2014/12/25 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
防汛通知
2015/04/25 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS