<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用js库控制vue过渡动作</title>

    <script src="vue.js"></script>

    <script src="velocity.js"></script>

</head>

<body>

<!--

velocity官网：http://velocityjs.org/

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，

并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。

Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、

转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，

是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，

最低可兼容到 IE8 和 Android 2.3。

-->

<div id="demo">

    <button @click="type=!type">显示/隐藏</button>

    <transition @before-enter="beforEnter" @enter="enter" @leave="leave" :css="false">

        <h1 v-if="type">百度一下就知道</h1>

    </transition>

</div>

<script>

    new Vue({

        el:"#demo",

        data:{

            type:false

        },

        methods:{

            beforEnter(el){

              el.style.opacity=0;

            },

            enter(el,done){

                Velocity(el,{opacity:1},{duration:2000,complete:done});

            },

            leave(el,done){

                Velocity(el,{opacity:0},{duration:2000,complete:done});

            }

        }

    });

</script>

</body>

</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. Mongo副本集的配置以及php node.js连接使用副本集

    最近弄了下mongodb的副本集, 首先说下没有认证情况的副本集,相对比较简单,因为环境有限,我在同一台服务器上做了模拟. --rest参数是打开web监控页面,比如我们这里监听37017端口,则打开 ...

  2. Python开发【笔记】：探索Python F-strings

    F-strings 在python3.6.2版本中,PEP 498 提出一种新型字符串格式化机制,被称为“字符串插值”或者更常见的一种称呼是F-strings(主要因为这种字符串的第一个字母是f) 简 ...

  3. 优云老王的心路历程（二）：下一站Web体验监控产品

    在上一篇文章中,和大家聊到了建立Web应用体验监控体系,经过了概念阶段,也完成了技术选型,就进入了把实质性的产品研发阶段.作为产品经理,时刻不敢忘记我们的产品目标:无限感知你的用户,建立完备的体验监控 ...

  4. CF734F Anton and School 构造+数论

    正解:构造 解题报告: 先放下传送门QwQ 这题首先要知道一个结论:(x&y)+(x|y)=x+y 还是能理解的趴? 所以我们把bi+ci就能得到∑a+n*a[i] 然后我们就能成功求出∑a ...

  5. OCR技术浅探：Python示例(5)

    文件说明: 1. image.py——图像处理函数,主要是特征提取: 2. model_training.py——训练CNN单字识别模型(需要较高性能的服务器,最好有GPU加速,否则真是慢得要死): ...

  6. [Axiom3D]第一个Axiom3D程序

    Axiom3D程序的基本渲染流程 #region Namespace Declarations using System; using System.Linq; using Axiom.Core; u ...

  7. java多线程（六）

    使用Runnable接口创建线程 Runnable接口 只有一个run()方法 Thread类实现了Runable接口 便于多个线程共享资源 Java不支持多继承,如果已经继承了某个基类,便要实现Ru ...

  8. testng生成报告ReportNG美化测试报告

    testng生成报告ReportNG美化测试报告 testng生成报告ReportNG美化测试报告 ReportNG 是一个配合TestNG运行case后自动帮你在test-output文件内生成一个 ...

  9. tp模板基础

    目录简介 创建应用 在项目目录创建入口文件shop/index.php 创建虚拟主机,访问应 路由形式 路由: 系统从URL参数中分析出当前请求的分组.控制器.和操作的过程就是“路由”. Tp框架路由 ...

  10. 大数据，why python

    大数据,why python ps, 2015-12-4 20:47:46 python" title="大数据,why python">http://www.op ...