Vue用velocity.js的动画

1.先引入velocity的js

用法

<transition name="fade"

@before-enter="beact"
@enter="eact"
@before-leave="blact"
@leave="lact"
>
<div v-if="show" >hello world</div>
</transition>


methods:{

                    blact:function(el){
                        //用法
                        Velocity(el,{
                            opacity:1
                        },{
                            duration:1000,
                            complete:done()
                            })
                    },
complete这个属性加上done()函数,当velocity执行完这个动画之后complete这个属性对应的内容会被自动执行,执行done()函数,接下来的钩子周期继续执行

原文地址:https://www.cnblogs.com/yubaibai/p/10720948.html

时间: 2024-10-29 06:47:58

Vue用velocity.js的动画的相关文章

Velocity.js动画库使用

1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2.兼容性 可兼容到 IE8 和 Android 2.3. 若需要兼容 IE8,就必须引入 jQuery 1.x 3.示例代码(注意文件引用路径) (1)index.html <!DOCTYPE html> <html lang="zh"> <head>

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

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>

vue里面使用Velocity.js

英文文档:http://velocityjs.org/ 中文手册(教程):http://www.mrfront.com/docs/velocity.js/ velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画.转换动画(transforms).循环. 缓动.SVG 动画.和

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数 1.进入动画钩子:before-enter,enter,after-enter; 2.离开动画钩子:before-leave,leave,after-leave; 3.在enter钩子中的函数调用done()告诉Vue,JS动画完成. 4.使用velocity.js动画库实现动画:Velocity(el,{样式属性},{duration:1000,complete:done}) <!DOCTYPE html> <ht

Vue.js 过渡 &amp; 动画

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 首先是无过渡效果的动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> span._active{ background:pink; } <

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

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

javascript动画:velocity.js学习

第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个元素后,就可以用这个元素去调用.velocity()为它添加动画效果.例如: //将一个变量分配给某个jQuery元素对象. var $div = $(“div”); //使用velocity设置该元素的动画 $div.velocity({ opacity : 0 }); //该句语法与jQuery

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

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

jquery动画切换引擎插件 Velocity.js 学习02

案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以动画形式消失,第一页以动画形式进入.   JS代码: (function(){ // 定义变量 var container = $('.container'); //主容器 var boxFront = $('.box-front'); //卡片正面 var mkLogo = $('.img-hea