Comment implémenter l'effet de transition CSS en utilisant vue

Cet article présente principalement l'exemple d'effet de transition CSS de la vue frontale Web. Maintenant, je le partage avec vous et le donne comme référence.

L'importance des effets de transition dans l'expérience interactive va de soi. Dans le passé, nous utilisions js ou Jquery pour ajouter ou supprimer la classe d'éléments, combinée aux styles définis en CSS, et après avoir référencé certaines bibliothèques javascript, nous pouvions créer des effets dynamiques très complexes et époustouflants. Cependant, cette méthode l'est encore trop. encombrant.

vue.js dispose d'un système de transition intégré qui peut appliquer automatiquement des effets de transition lorsque des éléments sont insérés ou supprimés du DOM. Vue déclenchera une transition ou une animation CSS au bon moment. Vous pouvez également fournir des fonctions de hook javascript correspondantes pour effectuer des opérations DOM personnalisées pendant le processus de transition.

Chaque effet de transition doit utiliser l'attribut de transition sur l'élément cible.

<p v-if="show" transition="my-style">显示</p>

Les fonctionnalités de transition peuvent être utilisées avec les instructions suivantes :

1.v-if 2.v-show 3.v-for 4. Composants dynamiques

Il existe d'autres instructions ou ressources, vous pouvez les trouver par vous-même.

L'exemple de code complet est le suivant :

<p v-if="show" :transition="expand"></p>  // expand必需事先定义好，expand后面写样式要用（关键）
<transition name="expand"><p v-if="show">显示</p></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡，元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

Bien sûr, il y a un début et il doit y avoir un état final. Il a en fait quatre noms (de classe CSS) qui basculent entre les deux. entrer/sortir des États.

1.v-enter : définit l'état de départ d'entrée dans la transition, prend effet lorsque l'élément est inséré et est supprimé dans l'image suivante

2.v-enter-active : Définit l'état d'entrée de la transition. L'état final prend effet lorsque l'élément est inséré, et est supprimé une fois la transition/animation terminée.

3.v-leave : définit l'état de départ de la transition de sortie, prend effet lorsque la transition de sortie est déclenchée, et se déplace dans l'image suivante Sauf

4.v-leave-active : Définit l'état de départ de la transition de sortie, qui prend effet lorsque la transition de sortie est déclenchée. 🎜>

dans le cadre suivant. Selon les quatre états ci-dessus, cela peut être complété. Écrivez un effet de transition CSS, comme la page glissant dans le champ depuis le côté gauche de la fenêtre.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment créer element-ui (tutoriel détaillé)

Comment définir le vôtre basé sur ng-alain dans le composant de sélection angulaire ?

Comment modifier le style par défaut dans elementui

Utiliser elementUI pour implémenter des méthodes de thème personnalisées dans Vue

Interprétation détaillée du tutoriel d'utilisation de la bibliothèque de dessins plotly.js (tutoriel détaillé)

Comment modifier le style par défaut dans elementui ?

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!