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