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 ...
随机推荐
- stark - 数据列表
一.效果图 二.数据列表 知识点: 完成(list_display)(list_display_links) 1.根据str,拿字段对象,取中文 val = self.model._meta.get_ ...
- UIView动画补充
我自己的总结: // 第一种: Duration 时间 animations:动画体 /* [UIView animateWithDuration:4 animations:^{ CGRect rec ...
- ViewPager添加小圆点
ViewPager添加小圆点很简单,但是如果是网络图片可能就不太好做了,所以我这里给出一种方法,当然你也可以用其他的 1.主界面xml <?xml version="1.0" ...
- django基础之Ajax、分页、cookie与session
目录: Ajax之json Ajax简介 jquery实现的ajax js实现的ajax django分页器 COOKIE与SESSION 一.Ajax之json 1.什么是json? 定义: JSO ...
- stringbuffer 和 stringbuilder区别
stringbuffer 和 stringbuilder速度 小于 线程安全 线程非安全 单线程操作大量数据用stringbui ...
- html 音频
<!DOCTYPE html><meta charset="utf-8"><video src="movie.webm" cont ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- UVaLive4992:Jungle Outpost
传送门 半平面交. 首先,由显然成立法可以证明炸连续的几个总比分散火力效果更佳. 所以二分答案,转化为判定问题,即间隔$ans$个点的连线的半平面交是否为空. 半平面交判定即可. 时间复杂度:$O(N ...
- 开源工具-Json 解析器 Jackson 的使用
Json已经成为当前服务器与 WEB 应用之间数据传输的公认标准.Java 中常见的 Json 类库有 Gson.JSON-lib 和 Jackson 等.相比于其他的解析工具,Jackson 简单易 ...
- 【定义及安装】Ambari——大数据平台的搭建利器
Ambari 是什么 Ambari 跟 Hadoop 等开源软件一样,也是 Apache Software Foundation 中的一个项目,并且是顶级项目.目前最新的发布版本是 2.0.1,未来不 ...