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


     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     <!--1.导入Vue的包-->
    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        <!--  在实现列表过渡的时候,如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用transition包裹,需要使用transitionGroup -->
    54       <!--  如果要为v-for循环创建的元素设置动画,必须为每一个元素设置 :key属性 -->
    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>
  • 相关阅读:
    Ubuntu若何开启root用户及此外登录成就的处置
    在Linux操作零碎中若何装配内核
    谭浩强C语身教程第一章C言语概述(1)
    Linux独霸琐细下文件的非凡权限
    关于C#中的String replace 函数
    Animation_01_2011年12月24日13:07:23
    HorizontalScrollView_应用举例
    res/values/colors.xml
    Text_01_2011年12月24日12:57:02
    rubbish
  • 原文地址:https://www.cnblogs.com/songsongblue/p/10996716.html
Copyright © 2020-2023  润新知