Maison > Article > interface Web > Comment changer l'animation des éléments et des composants dans Vue3
Comment changer l'animation des éléments et des composants dans Vue3
- PHPzavant
- 2023-05-14 14:16:11900parcourir
Exemple d'analyse
Commutation d'animation entre les éléments
La commutation d'animation entre les éléments est la commutation entre deux éléments dom. Par exemple, un div disparaît et l'autre div s'affiche. La disparition correspond à l'effet de fondu sortant. effet de fondu entrant. Dans cet exemple, nous utilisons deux div, l'un affiche hello world, l'autre affiche bye world, puis utilisons un effet de fondu. Le bouton contrôle le changement de l'animation. Le code est le suivant : 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放到300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81标签之间，使用一个Boolean变量show控制元素的显示和隐藏，当我们点击按钮的时候，执行handleClick函数，将show变量取反，达到切换的效果。 在代码中我们还看到了在transition标签上使用了一个mode="out-in",这个mode的取值其实还有一个是mode="in-out",两者的区别如下：
mode="out-in": 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示 mode="in-out"
<!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> Comme indiqué dans le code ci-dessus, nous utilisons CSS pour définir les effets de fondu d'entrée et de sortie, puis ajoutons le Le div est placé entre les balises <code>300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81 et une variable Boolean show. est utilisé pour contrôler l'affichage et le masquage de l'élément, lorsque nous cliquons sur le bouton, exécutons la fonction handleClick et inversons la variable show pour réaliser la commutation. effet. Dans le code, on voit également qu'un mode="out-in" est utilisé sur la balise de transition. La valeur de ce mode est en fait mode =". in-out", la différence entre les deux est la suivante :
mode="out-in" : indique que lorsque deux éléments sont commutés, le current L'élément disparaît en premier, puis l'élément à afficher est affiché. mode="in-out" : Indique que lorsque deux éléments sont commutés, l'élément à afficher est affiché en premier, puis. l'élément actuel disparaît# 🎜🎜#Les lecteurs peuvent essayer ces deux attributs pour voir l'effet, et l'impression sera plus profonde
Dans le code, nous voyons un attribut apparaître, ce qui signifie que lorsque nous entrons dans le navigateur Exécuter l'animation à l'ouverture de l'interface, sinon il n'y aura pas d'animation lorsque la page sera chargée
Animation basculant entre les composants
#🎜🎜#Dans Vue, nous utiliserons plus de composants . En fait, la commutation d'animation peut également être réalisée entre les composants. Ici, nous pouvons transformer l'exemple ci-dessus et utiliser des composants dynamiques pour obtenir l'effet d'animation de commutation entre les éléments ci-dessus. Le code est le suivant : #🎜🎜#rrreee.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- À propos de vue utilisant le validateur : VeeValidate3
- Quelles sont les différences entre calculé et méthode dans Vue ?
- Introduction à la méthode de désactivation de la vérification Eslint dans le projet vue
- Introduction à plusieurs méthodes de définition de modèles de composants dans Vue.js
- Quatre endroits pour implémenter AJAX dans les applications Vue