1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>使用js库控制vue过渡动作</title>
  7.     <script src="vue.js"></script>
  8.     <script src="velocity.js"></script>
  9. </head>
  10. <body>
  11. <!--
  12. velocity官网：http://velocityjs.org/
  13. Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，
  14. 并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。
  15. Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、
  16. 转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
  17.  
  18. 它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，
  19. 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，
  20. 最低可兼容到 IE8 和 Android 2.3。
  21. -->
  22. <div id="demo">
  23.     <button @click="type=!type">显示/隐藏</button>
  24.     <transition @before-enter="beforEnter" @enter="enter" @leave="leave" :css="false">
  25.         <h1 v-if="type">百度一下就知道</h1>
  26.     </transition>
  27. </div>
  28. <script>
  29.     new Vue({
  30.         el:"#demo",
  31.         data:{
  32.             type:false
  33.         },
  34.         methods:{
  35.             beforEnter(el){
  36.               el.style.opacity=0;
  37.             },
  38.             enter(el,done){
  39.                 Velocity(el,{opacity:1},{duration:2000,complete:done});
  40.             },
  41.             leave(el,done){
  42.                 Velocity(el,{opacity:0},{duration:2000,complete:done});
  43.             }
  44.         }
  45.     });
  46. </script>
  47.  
  48. </body>
  49.  
  50. </html>

　　

050——VUE中使用js库控制vue过渡动作的更多相关文章

  1. 关于Vue中main.js，App.vue，index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  2. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  3. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  4. vue中的js引入图片，必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  5. vue中的js引入图片，使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  6. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

  7. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  8. 必备技能六、Vue框架引入JS库的正确姿势

    在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...

  9. vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

随机推荐

  1. modelform动态显示select标签的对象范围

    既根据当前登录人,动态显示对象相关的的select的选项,例如 A登录,只显示A的客户,B登录,只显示B自己的客户 先了解form的ModelChoiceField字段(这个表格没意义,就是引出参数q ...

  2. 【Maven学习】Nexus私服代理其他第三方的Maven仓库

    一.背景 [Maven学习]Nexus OSS私服仓库的安装和配置 http://blog.csdn.net/ouyang_peng/article/details/78793038 [Maven学习 ...

  3. JavaScript中的作用域以及this变量

    原文:Scope and this in JavaScript 今天我想简单讨论下关于JavaScript的作用域和this变量."作用域"的概念就是说.我们的代码能够从哪里去訪问 ...

  4. 有关ros::spin()和ros::spinonce()若干感受

    ros::spinonce()一般与loop_rate.sleep()同时出现,用来控制处理回调函数的频率,并且没有消息就收来时,就会程序堵塞,不会占用CPU资源. ros::spin(),用于回调函 ...

  5. Openstack（三）Haproxy+Keepalived双机

    3.1部署keepalived 3.1.1下载keepalived源码包,并解压 # wget http://www.keepalived.org/software/keepalived-1.4.2. ...

  6. 学习Mysql的记录贴 记录的内容是 指令的试用

    前言:操作系统是WIn7 64位 旗舰版   ,Mysql的版本是mysql-5.7.10-winx64 是社区版 就是所谓的最后的免费版本. 下载后 解压 然后配置my.ini文件. ××××××× ...

  7. flask 上下文管理 &源码剖析

    基本流程概述 - 与django相比是两种不同的实现方式. - django/tornado是通过传参数形式实现 - 而flask是通过上下文管理, 两种都可以实现,只不实现的方式不一样罢了. - 上 ...

  8. http之http1.0和http1.1的区别

    下面主要从几个不同的方面介绍HTTP/1.0与HTTP/1.1之间的差别,当然,更多的内容是放在解释这种差异背后的机制上. 1 可扩展性 可扩展性的一个重要原则:如果HTTP的某个实现接收到了自身未定 ...

  9. G.Finding the Radius for an Inserted Circle 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛

    地址:https://nanti.jisuanke.com/t/17314 题目: Three circles C_{a}C​a​​, C_{b}C​b​​, and C_{c}C​c​​, all ...

  10. Learning to Rank之RankNet算法简介

    排序一直是信息检索的核心问题之一, Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning to Rank的简介请见我的博文Learning to Rank ...