vue动画库 velocity-animate
NPM:# npm i velocity-animate<template><div><transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"><divv-show="show1">show1 true ...
·
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>
更多推荐
已为社区贡献9条内容
所有评论(0)