当前位置: 代码迷 >> 综合 >> vue动画库 velocity-animate
  详细解决方案

vue动画库 velocity-animate

热度:72   发布时间:2023-12-29 23:41:56.0

NPM:

# npm i velocity-animate
<template><div><transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"><div  v-show="show1">show1 true false 执行 enter leave动画</div></transition ></div>
</template>
<script>
export default {name: "APP",data() {return {show1: true}},methods: {//初始beforeEnter: function(el) {// console.log(el);// alert("beforeEnter");el.style.opacity = 0;el.style.transformOrigin = "left";},enter: function(el, done) {//进场动画// alert("enter");//  console.log(done);let that = this;Velocity(el, { opacity: 1 }, { duration: 500 });// Velocity(el, {opacity:0}, {duration:1000, complete: function(){// }});},leave: function(el, done) {//离场动画let that = this;Velocity(el, { opacity: 0 }, { duration: 500 });}}
}
</script>

参考NPM:https://www.npmjs.com/package/velocity-animate