vue-动画（多元素）

一、多元素动画

需要使用transition group组件。

<transition group>

</transition group>

 

二、实例

动画显示搜索结果。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>多元素过渡</title>
 6     <!-- 引入css -->
 7   <!-- <link rel="stylesheet" href="../css/animate.min.css"> -->
 8   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
 9   <!--引入vue-->
10   <script src="../js/vue.js"></script>
11   <style>
12   /*这里写标签选择器动画的大小可以生效，但是使用di选择器就不生效*/
13       p{
14           width: 100px;
15           height: 50px;
16           background-color: orange;
17           margin：0 auto;
18       }     
19   </style>
20 </head>
21 <body>
22 
23     <div id="hello">
24         <input type="text" v-model='name'>
25         <!-- 动画效果(p元素左侧进入右侧离开) -->
26         <transition-group name='fade' enter-active-class='animated bounceInLeft' leave-active-class='animated bounceOutRight'>
27             <p v-show='flag' v-for='(v,k) in arr2' :key='k'>{{v}}</p>
28         </transition-group>    
29     </div>
30 
31     <script>
32         //vue实例
33         let vm = new Vue({
34             el:'#hello',
35             data:{
36                 flag:true,
37                 arr:['alice','jhon','monica','maass','simon','jack','bolo','anly','abama','koug'],
38                 name:''
39             },
40             /*计算属性*/
41             computed:{
42                 arr2:function(){
43                     var temp=[];
44                     this.arr.forEach(val => {
45                         if(val.includes(this.name)){
46                             temp.push(val);
47                         }
48                     });
49                     return temp;
50                 }
51             }
52         });
53     </script>
54 </body>
55 </html>

 

三、实现效果

     

 

posted @ 2021-09-08 11:58  AnnLing  阅读(106)  评论(0)    收藏  举报