Velocity——自定义实现动画效果
css3的动画效果:
比如,通过选中节点显示对于的弹框动画,这里需要注意当前div是不可立即隐藏的,即:设置 display: none;
.right-to-left.active { transition: right 0.5s ease-out; }
动画的运行速率,不同的速度会产生不同的结果,以下是可取值。
- ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
- linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
- ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
- ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
- ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
![](http://upload-images.jianshu.io/upload_images/101399-070309789e3dfa8f.png?imageMogr2/auto-orient/strip|imageView2/2/w/491/format/webp)
参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,也就是立即执行,如果在多个动画直接有先后顺序,那么它就会派上用场:
transition: all 0.5s ease-in-out 0s;
![](http://upload-images.jianshu.io/upload_images/101399-236c398b65ae8389.png?imageMogr2/auto-orient/strip|imageView2/2/w/472/format/webp)
Velocity实现动画效果:比如显示隐藏菜单动画过渡
<template> <div> <transition name="fade" @before-enter="handlebeforeEnter" @enter="handleEnter" @after-enter="handleafterEnter" > <p v-show="jsshow" class="nav-container" :class="clazz" :style="sty" ref="cont" > js动画 </p> </transition> <button @click="handlejsClick"> 切换js动画 </button> </div> </template> <script> import Velocity from 'velocity-animate' export default{ data(){ return { jsshow:true, width:'', clazz:'', sty:'', } }, methods:{ handlejsClick(){ this.jsshow=!this.jsshow; }, handlebeforeEnter(el){ el.style.background='red' el.style.width='0' }, handleEnter(el,done){ let self = this; let cont = self.$refs.cont console.log('展开的过程',cont); Velocity(el, { opacity: 1, left: '300px' }, { duration: 300, easing: "ease-in-out", progress(elements) {//展开的过程 el.style.width=el.style.left console.log('展开的过程',el); console.log('2222',done); console.log('33333',elements); }, // complete:done complete(elements) {//展开结束 console.log('展开结束',elements); console.log('el',el); console.log('done',done); done() } }) }, handleafterEnter(el){// 执行done()触发 // el.style.width='600px' el.style.background='yellow' console.log('展开结束',el); // el.style.width='600px' } }, } </script>
直接绑定元素的方式也可以:
expand() {// 展开 let self = this; let el = this.$refs['showBox']// 获取需要绑定的元素 const maxWidth = '300px' Velocity(el, { width: maxWidth }, { duration: 90, easing: "ease-in-out", progress(elements) {//展开的过程 self.width = elements[0].clientWidth || maxWidth self.$emit("expand", self.width) // console.log(self.width, '展开的过程'); }, complete(elements) {//展开结束 self.isExpanded = true self.width = elements[0].clientWidth // console.log(self.width, '展开结束', elements[0].clientWidth); } }) // let t1=window.setTimeout(function(){self.$emit("expand", WIDTH2)}, 250); }, unExpand() {// 折叠 let self = this; let el = this.$refs.cont Velocity(el, { width: minWidth }, { duration: 90, easing: "ease-in-out", progress(elements) {//折叠的过程 self.width = elements[0].clientWidth // console.log(self.width, '折叠的过程'); self.$emit("expand", self.width) }, complete(elements) {//折叠结束 self.isExpanded = false self.width = elements[0].clientWidth || minWidth // console.log(self.width, '折叠结束', elements[0].clientWidth); } }) },