<!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属性的作用的更多相关文章

  1. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  2. CSS3秘笈：第五章

    第五章  层叠管理样式 1.层叠是决定哪些样式属性要被应用到某一个元素的一套规则. 2.最近的祖先样式胜出:浏览器会采用离相关标签最近的样式. 3.直接应用的样式胜出:任何直接应用于指定标签的样式都战 ...

  3. Programming Entity Framework-dbContext 学习笔记第五章

    ### Programming Entity Framework-dbContext 学习笔记 第五章 将图表添加到Context中的方式及容易出现的错误 方法 结果 警告 Add Root 图标中的 ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第五章 动画 44：动画-使用第三方animate.css类库实现动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Android群英传笔记——第七章：Android动画机制和使用技巧

    Android群英传笔记--第七章:Android动画机制和使用技巧 想来,最 近忙的不可开交,都把看书给冷落了,还有好几本没有看完呢,速度得加快了 今天看了第七章,Android动画效果一直是人家中 ...

  7. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  8. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  9. 《Programming WPF》翻译 第8章 4.关键帧动画

    原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...

随机推荐

  1. Linux进程间通信（IPC）之信号量

    [Linux]进程间通信(IPC)之信号量详解与测试用例 2017年03月22日 17:28:50 阅读数:2255 学习环境centos6.5 Linux内核2.6 进程间通信概述 1. 进程通信机 ...

  2. 【DataBase】mysql连接错误：Cannot get hostname for your address

    问题 环境:win7 + 64Bit + 本地mysql5.6 问题:navicat连接本地mysql数据库,提示“Cannot get hostname for your address”,但是连接 ...

  3. 继承以及Super

    一个小小的总结,主要关注以下三个问题:ES5的继承方式,ES5的继承与ES6的继承的区别,ES6的super的几种使用方式以及其中this的指向. From http://supermaryy.com ...

  4. Ubuntu下c程序运行原理

    运行环境: 1.Vitural box下安装Ubuntu虚拟机 2.编译运行工具:gcc 3.编辑器:vim 主要过程: 1.利用vim编辑hello.c 2.编译和执行 (1)预处理阶段:使用 -E ...

  5. WIN32_FIND_DATA

    基本信息 编辑 关于文件的全部属性信息.总计有以下以下9种:文件的标题名.文件的属性(只读.存档,隐藏等).文件的创建时间.文件的最后访问时间.文件的最后修改时间.文件大小的高位双字.文件大小的低位双 ...

  6. python判断一个数是不是完全平方数

    思路: 完全平方数开根号后是一个整数,非完全平方数开根号的话是一个非整数 开根号后取整,如果开根号后是整数的话就不会改变值的大小 取整后再平方,如果值和之前一样,说明是完全平方数 import mat ...

  7. sql server备份损坏

    sql server备份损坏 转自:https://www.cnblogs.com/zhijianliutang/p/4080916.html 1.备份文件和数据库放在同一个(或一组)的物理磁盘上.磁 ...

  8. Python 过滤HTML实体符号简易方法

    html_tag = {' ': '\n', '"': '\"', '&': '', '<': '<', '>': '>', '&apos; ...

  9. Hive 教程(八)-hiveserver2

    hive 的另外一种启动方式是 hiveserver2,它是提供了一种服务,使得我们可以远程操作 hive,就像操作 mysql 一样 hiveserver1 既然有 hiveserver2,肯定有 ...

  10. 最好用linux版QQ

    这个版本的qq是见过linux下做好用的qq,希望对大家有用; 安装简单,qq易用,不卡死,可以接收文件. 安装过程如下: git clone https://gitee.com/wszqkzqk/d ...