Maison > Article > interface Web > Comment utiliser l'animation de transition animée dans Vue
Cette fois, je vais vous montrer comment utiliser l'animation de transition animée dans Vue. Quelles sont les précautions lors de l'utilisation de l'animation de transition animée dans Vue. Voici un cas pratique, jetons un coup d'œil.
Introduction :
Utilisation de la méthode de transition
Méthode intégrée de transition
transition-group
la bibliothèque animée implémente l'animation de transition
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib\vue.js"></script> <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" > <style> [v-cloak] { display: none; } p { width: 100px; height: 100px; background: red; margin: 10px auto; } /* .fade-enter-active, .fade-leave-active { transition: 1s all ease; } .fade-enter-active { opacity: 1; width: 300px; height: 300px; } .fade-leave-active { opacity: 0; width: 100px; height: 100px; } .fade-enter, .fade-leave { width: 100px; height: 100px; opacity: 0; } */ </style> <script> window.onload = function() { new Vue({ el: '#box', data: { show: '', list: ['apple', 'banana', 'orange', 'pear'] }, computed: { lists: function() { var arr = []; this.list.forEach(function(val) { if (val.indexOf(this.show) != -1) { arr.push(val); } }.bind(this)) return arr; } } }) } </script> </head> <body> <p id="box" v-cloak> <input type="text" v-model="show"> <!-- class定义 .fade .fade-enter{} 初始状态 .fade-enter-active{} 进入过程 .fade-leave{} 离开状态 .fade-leave-active{} 离开过程 --> <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight"> <!-- 内置方法 @before-enter = "beforeEnter" @enter = "enter" @after-enter = "afterEnter" @before-leave = "beforeLeave" @leave = "leave" @after-leave = "afterLeave" --> <!-- transition-group 多个元素运动,注意绑定key:1 --> <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index"> {{val}} </p> </transition-group> </p> </body> </html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. contenu, veuillez faire attention aux autres sites Web chinois php Articles connexes !
Lecture recommandée :
7 points qui sont facilement négligés lors de l'utilisation de la technologie vue
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!