这篇文章主要介绍了Vue3之元素和组件的动画怎么切换的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3之元素和组件的动画怎么切换文章都会有所收获，下面我们一起来看看吧。
实例解析
元素间的动画切换
元素之间的动画切换指的是两个
dom元素之间的切换，比如一个
div消失，另一个
div显示，消失对应着渐出的效果，显示对应渐入的效果，本例我们以两个
div，一个显示
hello world,另一个显示
bye world,然后使用一个按钮控制动画的切换，代码如下：
<!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>元素切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:
`
<transition mode="out-in" appear>
<div v-if="show">hello world </div>
<div v-else="show" >bye world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>如上面的代码所示，我们使用CSS定义好渐入和渐出的效果，然后将我们要做动画的
div放到
<transition></transition>标签之间，使用一个
Boolean变量
show控制元素的显示和隐藏，当我们点击按钮的时候，执行
handleClick函数，将
show变量取反，达到切换的效果。 在代码中我们还看到了在transition标签上使用了一个
mode="out-in",这个
mode的取值其实还有一个是
mode="in-out",两者的区别如下：
mode="out-in": 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示
mode="in-out"：表示两个元素切换的时候，待显示的元素先显示，当前的元素再消失
读者可以将这两个属性都试试，看下效果，印象会更深
在代码中我们看到有一个属性appear，这个属性的意思是当我们在浏览器中打开界面的时候执行动画，否则页面在加载的时候没有动画
组件间的动画切换
在Vue中我们更多的会使用组件的方式 ，其实组件之间也是可以做动画切换的实现的，这里我们可以把上面的例子改造下，以动态组件的方式实现下上面元素间切换的动画效果，代码如下：
<!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>组件间切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 多个单组件之间的动画
const ComponentA = {
template:'<div>hello world</div>'
}
const ComponentB = {
template:'<div>bye world</div>'
}
const app = Vue.createApp({
data() {
return {
component:'component-a'
}
},
methods: {
handleClick(){
if(this.component === 'component-a'){
this.component = 'component-b';
}else{
this.component = 'component-a';
}
}
},
components:{
'component-a':ComponentA,
'component-b':ComponentB
},
// 动态组件的方式
template:
`
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>