四、Vue中的动画
1、使用 Vue 实现基础的 CSS 过渡与动画效果
过渡：比如说一个 div 的背景颜色从红色逐渐变成绿色，这叫过渡；
动画：比如说一个 div 从左到右的移动，这叫动画；
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 样式 -->
<style>
@keyframes leftToRight {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}
.animation{
animation: leftToRight 3s;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
animate: {
animation: false
}
}
},
methods:{
open(){
this.animate.animation = !this.animate.animation;
}
},
template: `
<div>
<div :class="animate">hello world!</div>
<button @click="open">开启动画</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613194405623.png
过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 样式 -->
<style>
.transition{
transition: 3s background-color ease;
}
.blue{
background: blue;
}
.red{
background: red;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
animate: {
transition: true,
blue: true,
red: false
}
}
},
methods:{
shift(){
this.animate.red = !this.animate.red;
}
},
template: `
<div>
<div :class="animate">hello world!</div>
<button @click="shift">切换</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613195025983.png
通过绑定样式的方式实现过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 样式 -->
<style>
.transition{
transition: 3s background-color ease;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
styleObject: {
background: 'red'
}
}
},
methods:{
shift(){
if(this.styleObject.background === 'red'){
this.styleObject.background = 'blue';
}else{
this.styleObject.background = 'red';
}
}
},
template: `
<div>
<div class="transition" :style="styleObject">hello world!</div>
<button @click="shift">切换</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613205307175.png
