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

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

      <style>

        li{

         border:1px dashed #999;

         margin: 5px;

         line-height: 35px;

         padding-left: 5px;

         font-size: 12px;

        }

        li:hover{

         background-color: hotpink;

         transition: all 0.8s ease;

         width: 100%;

        }

        .v-enter,

        .v-leave-to{

         opacity: 0;

         transform: translateY(80px);

        }

        .v-enter-active,

        .v-leave-active{

         transition: all 0.6s ease;

        }

       /*下面的 .v-move  和  .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果*/

        .v-move{

         transition: all 0.6s ease;

        }

        .v-leave-active{

         position: absolute;

        }

      </style>

   </head>

   <body>

       <div id="app">

       <div>

         <label>

           Id:

           <input type="text" v-model="id">

         </label>

          <label>

           Name:

           <input type="text" v-model="name">

         </label>

           <input type="button" value="添加" @click="add">

       </div>

       <!-- <ul> -->

        <!--  在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->

       <!--  如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 -->

        <!-- 给transition-group 添加appear属性，实现页面刚展出来时候，入场时候的效果 -->

       <!--  通过 为transition-group 元素，设置tag属性，指定transition-group 渲染为指定的元素，如果不指定tag属性，默认，渲染为 span 标签 -->

        <transition-group appear tag="ul">

            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">

             {{item.id}}---{{item.name}}

            </li>

        </transition-group>

       <!-- </ul> -->

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           id:'',

           name:'',

           list:[

             {id:1,name:'赵高'},

             {id:2,name:'秦桧'},

             {id:3,name:'严嵩'},

             {id:4,name:'魏忠贤'},

           ]

         },

         methods:{

           add(){

               this.list.push({id:this.id,name:this.name})

               this.id=this.name=''

           },

           del(i){

             this.list.splice(i,1)

           }

         }

           });

       </script>

   </body>

 </html>

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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