第五章动画 48：动画-使用transition-group元素实例列表动画

拼搏现实的明天。 2021-11-04 11:38 188阅读 0赞

1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4   <head>
     5     <meta charset="utf-8">
     6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
     8     <title>Document</title>
     9     
    10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
    11      <style>
    12        li{
         
    13         border:1px dashed #999;
    14         margin: 5px;
    15         line-height: 35px;
    16         padding-left: 5px;
    17         font-size: 12px;
    18        }
    19        li:hover{
         
    20         background-color: hotpink;
    21         transition: all 0.8s ease;
    22        }
    23 
    24        .v-enter,
    25        .v-leave-to{
         
    26         opacity: 0;
    27         transform: translateY(80px);
    28        }
    29 
    30        .v-enter-active,
    31        .v-leave-active{
         
    32         transition: all 0.6s ease;
    33        }
    34      </style>
    35   </head>
    36 
    37   <body>
    38       <div id="app">
    39       <div>
    40         <label>
    41           Id:
    42           <input type="text" v-model="id">
    43         </label>
    44 
    45          <label>
    46           Name:
    47           <input type="text" v-model="name">
    48         </label>
    49 
    50           <input type="button" value="添加" @click="add">
    51       </div>
    52       <ul>
    53        
    54       
    55        <transition-group>
    56            <li v-for="item in list" :key="item.id">
    57             {
         {item.id}}---{
         {item.name}}
    58            </li>
    59        </transition-group>
    60       </ul>
    61       </div>
    62 
    63       <script>
    64           //创建 Vue 实例，得到 ViewModel
    65           var vm =  new Vue({
    66               el:'#app',
    67         data:{
    68           id:'',
    69           name:'',
    70           list:[
    71             {id:1,name:'赵高'},
    72             {id:2,name:'秦桧'},
    73             {id:3,name:'严嵩'},
    74             {id:4,name:'魏忠贤'},
    75           ]
    76         },
    77         methods:{
    78           add(){
    79               this.list.push({id:this.id,name:this.name})
    80               this.id=this.name=''
    81           }
    82         }
    83           });
    84       </script>
    85   </body>
    86 </html>

转载于:https://www.cnblogs.com/songsongblue/p/10996716.html