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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue实现评价星星功能
Jun 30 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中的比较运算符详解
2013/10/28 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Python错误的处理方法
2020/06/23 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
省三好学生申请材料
2014/01/22 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年党支部工作总结
2014/11/13 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android