<!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开发【模块】：内置模块

    内置模块 1.__import__ # import app目录下的kingadmin.py文件 for app in conf.settings.INSTALLED_APPS: __import__ ...

  2. day13（JSTL和自定义标签&MVC模型&javaweb三层框架）

    day13 JSTL标签库(重点) 自定义标签(理解) MVC设计模式(重点中的重点) Java三层框架(重点中的重点) JSTL标签库   1 什么是JSTL JSTL是apache对EL表达式的扩 ...

  3. [Axiom3D]第一个Axiom3D程序

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

  4. redhat 5 samba配置

    1.检查安装包 #rpm –qa | grep samba 必须有以下安装结果 samba-3.0.25:samba-common-3.0.25:samba-client-3.0.25:samba-s ...

  5. 7.2 Models -- Defining Models

    一.概述 1. 模型是一个类,它定义了你呈现给用户的数据的属性和行为.用户希望如果他们离开你的应用程序,并返回后(或如果他们刷新页面)看到的任何东西应该被一个model代表. 2. 确保在ember. ...

  6. SpringMVC—概述

    mvc容器的实例化: http://blog.csdn.net/lin_shi_cheng/article/details/50686876 Spring的启动过程: 1: 对于一个web应用,其部署 ...

  7. vue小toast插件报错runtine-only

    var Toast={}; Toast.install = function (Vue, options) { let opt = { defaultType:'bottom', // 默认显示位置 ...

  8. FTRL与Online Optimization

    1. 背景介绍 最优化求解问题可能是我们在工作中遇到的最多的一类问题了:从已有的数据中提炼出最适合的模型参数,从而对未知的数据进行预测.当我们面对高维高数据量的场景时,常见的批量处理的方式已经显得力不 ...

  9. Java StringBuffer 和 StringBuilder 类

    当对字符串进行修改的时候,需要使用 StringBuffer 和 StringBuilder 类. 和 String 类不同的是,StringBuffer 和 StringBuilder 类的对象能够 ...

  10. c++第二十三天

    p124~p126: 算数运算符 1.形如+ -(一元) * / % + -(二元)为算数运算符. 2.所有算数运算符都满足左结合律. 3.算数运算符的运算对象和求值结果都是右值. 4.在表达式求值之 ...