050——VUE中使用js库控制vue过渡动作
<!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过渡动作的更多相关文章
- 关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中的js引入图片，必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- vue中的js引入图片，使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- vue中的js动画与Velocity.js结合
vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...
- 在Vue将第三方JS库封装为组件使用
第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...
- 必备技能六、Vue框架引入JS库的正确姿势
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
- vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
随机推荐
- MySQL中数据表的查操作
查询数据表的全部内容 mysql> show tables;#查看当前数据库下的全部表 +--------------------+ | Tables_in_ceshi_ku | +------ ...
- 详解javascript实现自定义事件
这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...
- 【开发者笔记】C#连接mysql问题记录
1.概述:C#在调用mysql.data.dll连接本地数据库时报错,连接远程Linux服务器上的mysql服务器正常 2.报错记录,当前连接字符串 <add key="dbStrin ...
- 【开发者笔记】揣摩Spring-ioc初探，ioc是不是单例？
前言: 控制反转(Inversion of Control,英文缩写为IoC)把创建对象的权利交给框架,是框架的重要特征,并非面向对象编程的专用术语.它包括依赖注入(Dependency Inject ...
- linux centos7 erlang rabbitmq安装
最终的安装目录为/opt/erlang 和 /opt/rabbitmq wget http://erlang.org/download/otp_src_21.0.tar.gztar zxvf otp_ ...
- Spring—Ioc
IoC容器,最主要的就是完成对象的创建以及维护对象的依赖关系等. 所谓控制反转,包括两部分:一是控制,二是反转,就是把传统方式需要由代码来实现对象的创建.维护对象的依赖关系,反转给容器来帮忙管理和实现 ...
- python连接mysql,redis类方法
#coding:utf8 import pymysql import redis import conf '''MYSQL DB Object''' class Mysql(): def __init ...
- EditPlus 4.3.2487 中文版已经发布（11月12日更新）
新的版本修复了粘贴多重选择文本的问题,以及增加了横向扩展列选模式选择范围的快捷键(Ctrl+Alt+→/←).
- Python3.x：os._exit()， sys.exit()， exit() 的区别
Python3.x:os._exit(), sys.exit(), exit() 的区别 一.sys.exit() 说明:退出程序引发SystemExit异常, 可以捕获异常执行些清理工作.一般主程序 ...
- oracle数据库中的异常处理
create or replace procedure prc_get_sex (stuname student.name%type) as stusex student.sex%type; begi ...