vue中js动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中js动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnte"
@before-leave="handleBeforeEnter"
@leave="handleEnter"
@after-leave="handleAfterEnte"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
</body>
<script>
// js动画的钩子函数
// 入场动画对应的钩子函数enter
// [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
// 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。
// [email protected]enter动画结束后执行的函数。
// 出场动画对应的钩子函数leave
// @before-leave="handleBeforeEnter"
// @leave="handleEnter"
// @after-leave="handleAfterEnte"
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
},
handleBeforeEnter:function(el){
el.style.color = ‘red‘;
console.log(‘before-enter‘);
},
handleEnter:function(el,done){ // 2个参数
// 所有的动画,2s后执行。
setTimeout(()=>{
el.style.color = ‘green‘
// done(); // 手动调用回调函数。告诉vue动画已经执行完了。
},2000);
setTimeout(()=>{
done(); // 4s后结束动画。
},4000);
},
handleAfterEnte:function(el){
el.style.color = ‘#000‘; // 红色-》绿色-》黑色
}
}
})
</script>
</html>
js的常用动画库Velocity.js
Velocity.js 英文官网：http://velocityjs.org/
Velocity.js 中文文://www.mrfront.com/docs/velocity.js/index.html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
使用Velocity.js动画库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js常用动画库Velocity.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/velocity.min.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnte"
>
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
</body>
<script>
// js动画的钩子函数
// 入场动画对应的钩子函数enter
// [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
// 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。
// [email protected]enter动画结束后执行的函数。
// 出场动画对应的钩子函数leave
// @before-leave="handleBeforeEnter"
// @leave="handleEnter"
// @after-leave="handleAfterEnte"
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
},
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
handleEnter:function(el,done){
// 动画从0到1，耗时3s的时间。
// 动画执行完毕后，complete这个属性对应的内容会自动执行。（比如调用回调函数。）
Velocity(el,{opacity:1},{
duration:3000,
complete:done
}
);
},
handleAfterEnte:function(el){
console.log("动画结束");
}
}
})
</script>
</html>
原文地址：https://www.cnblogs.com/c-x-m/p/10013698.html
时间： 2024-12-16 19:08:06