<!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;

        }

        .v-enter,

        .v-leave-to{

         opacity: 0;

         transform: translateY(80px);

        }

        .v-enter-active,

        .v-leave-active{

         transition: all 0.6s ease;

        }

      </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>

            <li v-for="item in list" :key="item.id">

             {{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=''

           }

         }

           });

       </script>

   </body>

 </html>

第五章 动画 48：动画-使用transition-group元素实例列表动画的更多相关文章

  1. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  2. JS复习第五章

    第五章 引用类型 一.Object类型 创建object实例的方式有两种. 第一种是使用new操作符后跟object构造函数,如下所示: ver person = new Object( ) ; pe ...

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

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

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

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

  5. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  8. css 动画（二） transition 过渡 & animation 动画

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  9. css3，transition，animation两种动画实现区别

    我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...

随机推荐

  1. mybatis-generator自动生成代码时，只生成insert方法

    今天使用mybatis-generator自动生成代码时,发现只能生成insert方法, 以前所有的方法都是可以生成的,查看网上解决办法和检查数据库表结构后, 发现2种可以解决的办法: 1.修改myb ...

  2. 渗透测试 - KALI Linux 学习 - kali linux如何启动METASPLOIT服务

    kali 2.0 已经没有metasploit 这个服务了,所以service metasploit start 的方式不起作用. 在kali 2.0中启动带数据库支持的MSF方式如下: #1  首先 ...

  3. PHP-T

    TP5目录结构 ├─application 应用目录 ├─extend 扩展类库目录(可定义) ├─public 网站对外访问目录 ├─runtime 运行时目录(可定义) ├─vendor 第三方类 ...

  4. 【AMAD】django-silk -- 为Django提供如丝般顺滑的性能测量

    动机 简介 个人评分 动机 Django作为一个web框架,进行性能测量是很复杂的,不可以使用传统的程序profile工具. 因为,web app的性能是多维度的,不仅仅是代码执行效率,还包括网络延时 ...

  5. 【AMAD】splinter -- 用于测试web app的python框架

    简介 动机 作用 用法 热度分析 个人评分 简介 Splinter1是一个开源工具,使用Python编写,用于测试web apps.它可以用来对浏览器实现自动化操作,比如访问URLs,和按钮等交互. ...

  6. 应用安全 - 社工 - 大数据 - Fofa - 汇总

    搜索语法 title=”abc”   header=”abc”  body=”abc”  domain=”xx.com”  host=”.xx.cn”  port=”443”     ip=”1.1. ...

  7. 汉诺塔问题的C++实现

    有三根杆子A,B,C.A杆上有N个(N>1)穿孔圆环,盘的尺寸由下到上依次变小.要求按下列规则将所有圆盘移至C杆:每次只能移动一个圆盘:大盘不能叠在小盘上面.如何移?最少要移动多少次? 原理可参 ...

  8. 【C/C++语言】指针常量与常量指针的区别

    三个名词虽然非常绕嘴,不过说的非常准确.用中国话的语义分析就可以很方便地把三个概念区分开. 一) 常量指针. 常量是形容词,指针是名词,以指针为中心的一个偏正结构短语.这样看,常量指针本质是指针,常量 ...

  9. （5.4）mysql高可用系列——MySQL异步复制（实践）

    关键词:mysql复制,mysql异步复制,mysql传统异步复制 [1]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数 ...

  10. [转帖]AMD霄龙安全加密虚拟化曝漏洞：已修复

    AMD霄龙安全加密虚拟化曝漏洞:已修复 https://www.cnbeta.com/articles/tech/862611.htm 硬件的安全问题 今年初,Google的一位研究人员发现,AMD ...