1、Vue中的js动画
Vue中的js动画是通过vue提供的动画钩子函数来绑定事件的，然后在事件函数中处理对应的动画。
1.1、动画入场的钩子函数
before-enter：动画入场运动前一刻执行（自动执行）
enter：动画运动时执行
after-enter：在动画enter函数中运动完毕并调用回调done时执行
1.1.1、before-enter钩子
我们先来打印一下before-enter的参数是什么
<template>
<div class="home">
<transition name="fade" @before-enter="handleBeforeEnter">
<div class="demo" v-show="show">动画元素</div>
</transition>
<button @click="handleChange">点击</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
show:false,
};
},
methods: {
handleBeforeEnter() {
console.log("arguments", arguments);
},
handleChange() {
this.show = !this.show;
},
},
};
</script>
<style scoped>
.demo {
width: 230px;
height: 50px;
margin: auto;
background-color: blueviolet;
color: antiquewhite;
}
</style>
before-enter参数.png
依据打印结果来看：before-enter开始动画前的参数就是一个单纯的动画dom元素（这个钩子函数是自动执行的）
1.1.2、enter钩子
动画运行的钩子函数， done是动画运行完成后的回调函数，当动画运行完成以后执行done函数会触发after-enter动画钩子函数的运行
<template>
<div class="home">
<transition name="fade" @before-enter="handleBeforeEnter" @enter="enterHandler">
<div class="demo" v-show="show">动画元素</div>
</transition>
<button @click="handleChange">点击</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
show:false,
};
},
methods: {
handleBeforeEnter(dom) {
// console.log("arguments", arguments);
dom.style.color = 'yellow';
},
handleChange() {
this.show = !this.show;
},
enterHandler(dom,done){
console.log(arguments)
setTimeout(() => {
dom.style.color = 'red'
}, 1000);
// 执行done回调
setTimeout(() => {
done()
}, 2000);
},
},
};
</script>
<style scoped>
.demo {
width: 230px;
height: 50px;
margin: auto;
background-color: blueviolet;
color: antiquewhite;
}
</style>
enter参数.png
1.1.3、after-enter动画执行完的钩子
<template>
<div class="home">
<transition name="fade" @before-enter="handleBeforeEnter" @enter="enterHandler" @after-enter="doneHandler">
<div class="demo" v-show="show">动画元素</div>
</transition>
<button @click="handleChange">点击</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
show:false,
};
},
methods: {
// 显示动画dom元素
handleChange() {
this.show = !this.show;
},
// 动画入场前自动执行的动画
handleBeforeEnter(dom) {
dom.style.color = 'yellow';
},
// 动画执行过程中的钩子函数
enterHandler(dom,done){
console.log(arguments)
setTimeout(() => {
dom.style.color = 'red'
}, 1000);
setTimeout(() => {
done()
}, 2000);
},
// 动画完成后执行的动画钩子函数
doneHandler(dom){
dom.style.color="green"
}
},
};
</script>
<style scoped>
.demo {
width: 230px;
height: 50px;
margin: auto;
background-color: blueviolet;
color: antiquewhite;
}
</style>
效果图.gif
1.2、注意事项
done函数的错误写法
setTimeout(() => {
dom.style.color = 'red'
done()
}, 1000);
image.png
解决方案
加入定时器延时
enterHandler(dom,done){
console.log(arguments)
setTimeout(() => {
dom.style.color = 'red'
}, 1000);
setTimeout(() => {
done()
}, 2000);
},
1.3、出场动画
出场动画与入场一样的使用
before-leave：准备出场
leave：出场动画执行函数
after-leave：出场执行后
使用JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则过渡会立即完成。对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
<transition
:css="false"
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">Hello wold</div>
</transition>
2、动画示例
<template>
<div class="home">
<transition name="fade" @before-enter="handleBeforeEnter" @enter="enterHandler" @after-enter="doneHandler">
<div class="demo" v-show="show">动画元素</div>
</transition>
<button @click="handleChange">点击</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
show:false,
left:40,
timer:null
};
},
methods: {
// 显示动画dom元素
handleChange() {
this.show = !this.show;
},
// 动画入场前自动执行的动画
handleBeforeEnter(dom) {
},
// 动画执行过程中的钩子函数
enterHandler(dom,done){
this.timer = setInterval(()=>{
if(this.left < 300){
this.left++;
dom.style.left = this.left+'px';
}else {
this.left = 300;
dom.style.left = this.left;
done(); //执行动画回调
}
},30)
},
// 动画完成后执行的动画钩子函数
doneHandler(dom){
dom.style.color="green";
// 清除定时器
clearInterval(this.timer);
}
},
};
</script>
<style scoped>
.demo {
width: 230px;
height: 50px;
margin: auto;
position: absolute;
top: 100px;
left: 100px;
background-color: blueviolet;
color: antiquewhite;
}
</style>
2.1、效果展示
动画2.gif
3、Velocity.js动画库
首先进入官网下载Velocity.js
3.1、引入
<script src="./velocity.js"></script>
3.2、如何使用
3.2.1、首先创建一个公共的js目录
image.png
3.2.2、将官网上下载的Velocity.js放在该目录下（或者拷贝js代码，创建一个新的文件放进去）
image.png
3.2.3、引入
import Velocity from "@/vendor/velocity";
3.2.4、使用
<template>
<div class="home">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="enterHandler"
@after-enter="doneHandler"
>
<div class="demo" v-show="show">动画元素</div>
</transition>
<button @click="handleChange">点击</button>
</div>
</template>
<script>
import Velocity from "@/vendor/velocity";
export default {
name: "Home",
data() {
return {
show: false,
left: 40,
timer: null,
};
},
methods: {
// 显示动画dom元素
handleChange() {
this.show = !this.show;
},
// 动画入场前自动执行的动画
handleBeforeEnter(dom) {
dom.style.opacity = 0; // 动画开始样式
},
// 动画执行过程中的钩子函数
enterHandler(dom, done) {
Velocity(
dom,
{
opacity: 1, // 动画结束后的样式
},
{
duration: 2000, // 动画运行的时间
complete: done, // 动画运动完成后执行的函数
}
);
},
// 动画完成后执行的动画钩子函数
doneHandler(dom) {
dom.style.fontSize = "50px";
},
},
};
</script>
<style scoped>
.demo {
width: 230px;
height: 80px;
margin: auto;
position: absolute;
top: 100px;
left: 100px;
background-color: blueviolet;
color: antiquewhite;
}
</style>
3.2.5、效果展示
velocity.gif
4、多个元素之间的动画切换
太累了，明天再学.....
