<!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. 关于ckeditor在IE下出现不兼容的问题

    今天在用ckeditor时在ie下测试出现了不兼容问题,样式,字体等属性设置不了. 后来在html标签上方添加了: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. 【HANA系列】SAP HANA SQL查找字符串位置

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL查找字符 ...

  3. SQL Injection（Blind）

    SQL Injection(Blind),即SQL盲注,与一般注入的区别在于,一般的注入攻击者可以直接从页面上看到注入语句的执行结果,而盲注时攻击者通常是无法从显示页面上获取执行结果,甚至连注入语句是 ...

  4. idea、eclipse常用快捷键

    idea常用快捷键 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以 ...

  5. Xshell的使用以及常用命令

    工具/原料 Xshell 方法/步骤 打开软件,点击新建,在主机哪里写入要访问的ip地址,名称随意 点击文件之后,再点击打开: 就可以看到刚才新建的会话了: 点击连接,就会显示下面的画面,输入用户名, ...

  6. TOEFL | 听力题型

    通常是2个对话,4个讲座,但可能会有加试: 2~3 conversations  5 Questions/Each 4~6 lectures            6 Questions/Each 正 ...

  7. Linux学习笔记（16）Linux前后台进程切换（fg/bg/jobs/ctrl+z）

    关键词:Linux前后台进程切换,linux进程切换 fg.bg.jobs.&.ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令,但学会了也是很实用的一.& ...

  8. 从零开始，SpreadJS新人学习笔记【第3周】

    表单&函数 阔别多日, SpreadJS新人学习笔记,本周起正式回归!(在断更的这一个月中,我为大家先后录制了14期SpreadJS产品入门系列学习视频,希望帮助那些正在学习和使用 Sprea ...

  9. 2019牛客暑期多校训练营（第五场）G - subsequeue 1 (一题我真的不会的题)

    layout: post title: 2019牛客暑期多校训练营(第五场)G - subsequeue 1 (一题我真的不会的题) author: "luowentaoaa" c ...

  10. [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性)

    [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性) 题面 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以放的句子数目是没有限制的.小 G ...