<!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. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

  2. Mirror--自增键在镜像中的影响

    测试环境: OS: Windows Server 2008 R2 Enterprise SQL: SQL Server 2012 Enterprise 测试场景: 有SERVER A上数据库 DB10 ...

  3. git-【三】理解工作区与暂存区的区别

    基本概念 工作区:就是你在电脑上看到的目录,比如目录下testgit里的文件(.git隐藏目录版本库除外).或者以后需要再新建的目录文件等等都属于工作区范畴.       版本库(Repository ...

  4. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  5. python拼接字符串

    python拼接字符串一般有以下几种方法: 1.直接通过(+)操作符拼接 s = 'Hello' + ' ' + 'World' + '!' print(s) 输出结果:Hello World! 使用 ...

  6. python之celery队列模块

    一.celery队列简介 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery. 1 ...

  7. Bootstrap fileinput v1.0（ssm版）

    前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...

  8. VS2010/MFC编程入门之二十九（常用控件：列表视图控件List Control 下）

    上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...

  9. hdu5091 线段树

    题意: 给了n个点在平面中 n<10000  然后 将这给了一个 宽为W 高为 H 的 矩形, 然后 使得这个矩形可以 涵盖最多的点有多少个,然后矩形的宽平行x 轴高平行y轴.可以将该矩形 水平 ...

  10. Python:导入numpy报错 No module named numpy

    Numpy是python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比python自身的嵌套列表结构要高效的多.但是在使用numpy时可能会出错(如上图). 解决办法:下载安装对应版本 ...