一:vue中使用js动画

根据上一篇安装animate.css之后

vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样式。@enter是@before-enter触发结束后触发。

@enter不同的是会接收到两个参数,参数一为元素el,参数二为done(回调函数);done函数执行完就会触发@after-enter函数。

出场动画钩子函数@before-leave、@leave、@after-leave同理

<!--vue中使用js动画-->
<transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
<p v-show='jsshow'>js动画</p>
</transition>
<button @click="handlejsClick">切换js动画</button>
<script>
export default{
data(){
return { }
},
methods:{
handlebeforeEnter(el){
el.style.color='red'
},
handleEnter(el,done){
setTimeout(()=>{
el.style.color='green';
},2000);
setTimeout(()=>{
//这里的done回调函数也比较重要,done函数触发完又会触发@after-ender
done();
},4000)
},
handleafterEnter(el){
el.style.color='#535353'
}
},
}
</script>

二:vue中使用velocity.js

1.首先安装velocity.js

npm install velocity-animate --save-dev

2.在main.js中引入

import Velocity from 'velocity-animate'

3.原理跟上面一样,只是函数的变化方法不一样,这里的 complete: done跟上面的回调函数同理,一定要写,不然不会触发handleafterEnter函数

<template>
<div>
<transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
<p v-show='jsshow'>js动画</p>
</transition>
<button @click="handlejsClick">切换js动画</button>
</div>
</template> <script>
export default{
data(){
return {
jsshow:true
}
},
methods:{
handlejsClick(){
this.jsshow=!this.jsshow;
},
handlebeforeEnter(el){
el.style.opacity=0
},
handleEnter(el,done){
console.log("before结束了执行了enter")
Velocity(el,{opacity:1},{duration:3000,complete: done})
},
handleafterEnter(el){
el.style.color='red'
}
},
}
</script>

vue中使用js动画与velocity.js的更多相关文章

  1. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

  2. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  3. JQuery动画插件Velocity.js发布:更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  4. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  5. vue中可以自定义动画的前缀

    vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...

  6. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  7. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  8. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  9. 聊聊JS动画库:Velocity.js

    前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...

随机推荐

  1. hdu 1130 How Many Trees? 【卡特兰数】

    题目 题意:给你一个数字n,问你将1~n这n个数字,可以组成多少棵不同的二叉搜索树. 1,2,5,14--根据输出中的规律可以看出这是一个卡特兰数的序列.于是代用卡特兰数中的一个递推式: 因为输入可取 ...

  2. excel冻结窗格

    编辑excel时冻结窗格可以大大增加可读性.每个sheet都应该加上. 第一份工作的时候,上司比较严格,还因为这个挨过几次骂.所以这个技巧大家一定要掌握 方法很简单: 选中首行:视图 -- 冻结窗格 ...

  3. CUDA cufftPlanMany的用法_31通道32*8像素的FFT

    #include <cufft.h> #include <iostream> #include <cuda_runtime.h> #include <help ...

  4. NODE-WEBKIT教程(5)NATIVE UI API 之FRAMELESS WINDOW

    node-webkit教程(5)Native UI API 之Frameless window 文/玄魂 原文链接:http://www.xuanhun521.com/Blog/2014/4/15/n ...

  5. 单片机编译器Keil提供的sprintf有点问题

    AduC70xx系列,Keil提供的sprintf函数不太好用,好像有时会引起内存泄漏,造成不可预知的死机情况出现.

  6. WPF圆角按钮例程

    <Window x:Class="WpfApp3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  7. 全球第一开源ERP Odoo操作手册 数据库简介

    1.3 数据库简介 每一个独立核算的企业都有一套相互关联的账簿体系, 把这一套完整的账簿体系建立在计算机系统中就称为一个数据库. 一般一个企业只用一个数据库. 如果企业有几个下属的独立核算的实体,也可 ...

  8. 【BZOJ2328】 [HNOI2011]赛车游戏

    BZOJ2328 [HNOI2011]赛车游戏 前言 这道题目我真的佛了,卡精度+卡时间这就是下一个聊天鬼才. Solution 首先可以二分出最大速度,然后考虑下坡的话可能有更好的解,然后这样子算一 ...

  9. Pyhon 中文编码问题(字符串前加‘U’)

    中文编码问题是用中文的程序员经常头大的问题,在python下也是如此,那么应该怎么理解和解决python的编码问题呢? 我们要知道python内部使用的是unicode编码,而外部却要面对千奇百怪的各 ...

  10. [Ynoi2015]此时此刻的光辉(莫队)

    一道神题...自己写出来以后被卡常了...荣获洛谷最差解... 思路还是比较好想,对于每个数 \(\sqrt{n}\) 分块,对于 \(\sqrt{n}\) 以内的数,我们可以直接求出来.对于 \(\ ...