<!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. Python开发【模块】：time、datatime

    时间模块 时间相关的操作,时间有三种表示方式: 时间戳               1970年1月1日之后的秒,即:time.time() 格式化的字符串    2014-11-11 11:11,   ...

  2. 什么是虚拟DOM？

    (摘抄自一篇文章,觉得这里写得非常不错,所以单独放出来,希望能对大家有帮助.)React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM).虚拟DOM是干什么的?这就要从浏览器本身讲起 ...

  3. 设置XShell快捷键 复制粘贴 并禁用智能选择

    设置XShell快捷键 复制粘贴 并禁用智能选择 1打开选项 2键盘和鼠标->打开编辑 3新建 组合键 Ctrl+C 类型:菜单 ->操作 [编辑]复制  [编辑]粘贴 4选中 ctrl+ ...

  4. Java面试人事篇（二）

    1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能.最深入研究的知识领域 ...

  5. CSV文件读取类

    最近项目中,经常需要读取Csv文件.基本步骤是: (1)按行读取 (2)然后将一行数据按逗号,分割为字符串数组 (3)将各列字符串转换成相应类型的数据 ,如int double类型 写了一个简单的Cs ...

  6. 一次org.springframework.jdbc.BadSqlGrammarException ### Error querying database Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException问题排查过程

    先说结论: 因为在表设计中有一个商品描述字段被设置为desc,但desc是mysql中的关键字,如select id,name,desc,price from product;这条sql语句在查询时的 ...

  7. java Pattern（正则）类

    Pattern的静态方法matches 用于快速匹配字符串,该方法适合用于只匹配一次,且匹配全部字符串. Boolean b=Pattern.matches("^((13[0-9])|(15 ...

  8. appium问题解决

    ppium 1.4.16 版本 测试安卓7.0 提示AppiumSettings.Unlock.AndroidInputManager 安装 修改 C:\Program Files (x86)\App ...

  9. 在Linux系统下统计当前文件夹下的文件个数、目录个数

    1.统计当前文件夹下文件的个数,包括子文件夹里的 ls -lR|grep "^-"|wc -l 如下图: 2.统计文件夹下目录的个数,包括子文件夹里的 ls -lR|grep &q ...

  10. 怎样在linux下对U盘进行格式化和分区

    说明,为了不做无用功,首先必须卸载要分区的设备,分区才能执行成功.通过命令umount /media/?? 或者umount /mnt/??? 看你的实际情况,这一步必不可少.1.首先通过命令fdis ...