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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 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 Imagick获取图片RGB颜色值
2014/07/28 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
详解Python的单元测试
2015/04/28 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python IDLE入门简介
2017/12/08 Python
python代码实现ID3决策树算法
2017/12/20 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
《雪儿》教学反思
2014/04/17 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
党员转正申请报告
2015/05/15 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python