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 相关文章推荐
用js实现trim()的解决办法
Apr 16 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
react国际化react-intl的使用
May 06 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邮件类
2007/01/03 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
一个基于flask的web应用诞生(1)
2017/04/11 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python学生管理系统代码实现
2020/04/05 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python实现操作文件(文件夹)
2019/10/31 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python谱减法语音降噪实例
2019/12/18 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
捐款倡议书
2014/04/14 职场文书
2014年度个人总结范文
2015/03/09 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
mysql部分操作
2021/04/05 MySQL