第五章动画 50 动画-transition-group中appear和tag属性的作用

  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         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        <!--  在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
 63       <!--  如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 -->
 64        <!-- 给transition-group 添加appear属性，实现页面刚展出来时候，入场时候的效果 -->
 65       <!--  通过 为transition-group 元素，设置tag属性，指定transition-group 渲染为指定的元素，如果不指定tag属性，默认，渲染为 span 标签 -->
 66        <transition-group appear tag="ul">
 67            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
 68             {{item.id}}---{{item.name}}
 69            </li>
 70        </transition-group>
 71       <!-- </ul> -->
 72       </div>
 73 
 74       <script>
 75           //创建 Vue 实例，得到 ViewModel
 76           var vm =  new Vue({
 77               el:'#app',
 78         data:{
 79           id:'',
 80           name:'',
 81           list:[
 82             {id:1,name:'赵高'},
 83             {id:2,name:'秦桧'},
 84             {id:3,name:'严嵩'},
 85             {id:4,name:'魏忠贤'},
 86           ]
 87         },
 88         methods:{
 89           add(){
 90               this.list.push({id:this.id,name:this.name})
 91               this.id=this.name=''
 92           },
 93           del(i){
 94             this.list.splice(i,1)
 95           }
 96         }
 97           });
 98       </script>
 99   </body>
100 </html>
第五章 动画 50 动画-transition-group中appear和tag属性的作用

第五章动画 50 动画-transition-group中appear和tag属性的作用
