第五章动画 49 动画-实现列表删除和删除时候的动画效果

超、凢脫俗 2021-11-04 11:38 189阅读 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         width: 100%;
    23        }
    24 
    25        .v-enter,
    26        .v-leave-to{
         
    27         opacity: 0;
    28         transform: translateY(80px);
    29        }
    30 
    31        .v-enter-active,
    32        .v-leave-active{
         
    33         transition: all 0.6s ease;
    34        }
    35 
    36       /*下面的 .v-move  和  .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果*/
    37        .v-move{
         
    38         transition: all 0.6s ease;
    39        }
    40        .v-leave-active{
         
    41         position: absolute;
    42        }
    43      </style>
    44   </head>
    45 
    46   <body>
    47       <div id="app">
    48       <div>
    49         <label>
    50           Id:
    51           <input type="text" v-model="id">
    52         </label>
    53 
    54          <label>
    55           Name:
    56           <input type="text" v-model="name">
    57         </label>
    58 
    59           <input type="button" value="添加" @click="add">
    60       </div>
    61       <ul>
    62        
    63       
    64        <transition-group>
    65            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
    66             {
         {item.id}}---{
         {item.name}}
    67            </li>
    68        </transition-group>
    69       </ul>
    70       </div>
    71 
    72       <script>
    73           //创建 Vue 实例，得到 ViewModel
    74           var vm =  new Vue({
    75               el:'#app',
    76         data:{
    77           id:'',
    78           name:'',
    79           list:[
    80             {id:1,name:'赵高'},
    81             {id:2,name:'秦桧'},
    82             {id:3,name:'严嵩'},
    83             {id:4,name:'魏忠贤'},
    84           ]
    85         },
    86         methods:{
    87           add(){
    88               this.list.push({id:this.id,name:this.name})
    89               this.id=this.name=''
    90           },
    91           del(i){
    92             this.list.splice(i,1)
    93           }
    94         }
    95           });
    96       </script>
    97   </body>
    98 </html>

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