JavaScript过渡

Vue.js 也可以和一些JavaScript配合使用,只需要调用JavaScript钩子函数，而不需要定义CSS样式。transition接受选项 css：false,将直接跳过CSS检测，避免CSS规则干扰过渡，需要在enter和leave钩子函数中调用done函数，明确过渡结束时间。此处将引入Velocity.js来配合使用JavaScript过渡。

Velocity.js

Velocity.js是一款高效的动画引擎 ,可以单独使用也可以配合jQuery使用。它拥有和jQuery的animate一样的api接口，但比jQuery在动画处理方面更强大、更流畅，以及模拟了一些现实世界的运动，例如弹性动画等。

Velocity.js 可以做当jQuery的插件使用，例如：

$element.velocity({ left: "100px"}, 500, "swing", function(){console. log("done")
});
$element.velocity({ left: "100px"}, {duration: 500, easing: "swing",complete : function(){console.log("done");}
});

也可以单独使用,

var el = document.getElementById(id);
Velocity(el, { left : '100px' }, 500, 'swing', done);

JavaScript过渡使用

我们可以通过以下方式注册一个自定义的JavaScript过渡。

<style>  .my-velocity-transition {position: absolute; top:0px;  width: 100px; height: 100px;   background: black;}
</style>
<div v-if="velocity" transition="my-velocity"></div>
Vue.transition('my-velocity', {css : false,enter: function (el, done) {Velocity(el, { left : '100px' }, 500, 'swing', done);  },enterCancelled: function (el) {Velocity(el, 'stop');},leave: function (el, done) {Velocity(el, { left : '0px' }, 500, 'swing', done);  },leaveCancelled: function (el) {Velocity(el, 'stop');}
})

运行以上代码,在设置vue.velocity = true后，过渡系统会调用enter钩子函数，通过velocity对DOM展现动画效果，强制调用done函数，结束过渡效果。

JavaScript过渡相关推荐

vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
JavaScript 教程（二）
面向对象编程实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识对象是什么面向对象编程(Object Orien ...
Vue.js 进入/离开列表过渡
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate. ...
js过渡效果_干货 | Vue事件、过渡和制作index页面
" 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程. " Vue事件 1方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表 ...
vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
vue-transition过渡动画
如何给Vue控制的元素添加过渡动画 vue-transitions 1.1 将需要执行动画的元素放到transition组件中 1.2 当transition组件中的元素显示时会自动查找.v-ente ...
11,你听说过vue过渡动画了嘛？没有吧? 众里寻他千百度，百度不一定全面？
2020[前端VUE框架]最新最全实战课程,VUE56节分享,免费拿不谢! vue过度动画的使用方法整理 vue.js css 脸书发布于 2020-11-19 transition props n ...
JavaScript 教程（二） 1
面向对象编程实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识对象是什么面向对象编程(Object Orien ...
swiftui动画之tab自定义切换动画_vue 基础-动画过渡 transition 示例
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有大部分和官网相同的文案,有经验的同学择感兴趣的阅读) 讲到动画,说真的我自 ...

JavaScript过渡

JavaScript过渡相关推荐

最新文章

热门文章