<!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. 微信小程序-T

    微信小程序安装完毕后,真机调试及预览(打开调试模式)有数据,其他类型无数据在微信公众号-开发-域名信息中绑定正确的域名即可 配置微信小程序合法域名微信公众号-开发微擎应用-基础设置微信app-site ...

  2. 【MM系列】SAP技巧之更改布局

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP技巧之更改布局   前言部分 ...

  3. PJzhang:QQ输入法用户许可协议和隐私政策阅读

    猫宁!!! 参考链接:http://qq.pinyin.cn/ 中国用户量最大的输入法是搜狗输入法,百度输入法也有上亿的用户量. 我下载了7个输入法,查看他们的用户许可协议和隐私政策情况.这里说的都是 ...

  4. pandas 分组统计

    # coding:utf-8 import pandas as pd import numpy as np # path = r'C:\Users\wuzaipei\Desktop\桂林三金项目签到情 ...

  5. [转帖]从Intel和ARM争霸，谈芯片前世今生

    从Intel和ARM争霸,谈芯片前世今生 http://www.itpub.net/2019/07/24/2476/ 长文预警, 写的非常好.. 我尽量写得轻松一些,因为其实这个话题很有趣,仔细探究起 ...

  6. 谷歌官方颜色库 MaterialDesignColor

    谷歌官方颜色库 MaterialDesignColor

  7. 从入门到自闭之python三大器--装饰器进阶

    装饰器的进阶 有参装饰器: # def warpper(func): # def inner(*args,**kwargs): # user = input("user:") # ...

  8. linux 安装 python 最全教程

    环境:centos6.5 centos6.5 自带的 python 版本是 2.6.6,需要重新安装 2.7: centos7 自带的 python 版本是 2.7.5 基本操作 在安装新版本之前,一 ...

  9. Keras模型训练的断点续训、早停、效果可视化

    训练:model.fit()函数 fit(x=None, y=None, batch_size=None, epochs=, verbose=, callbacks=None, validation_ ...

  10. Spring的事务传播机制实例 （转）

    1,Propagation.REQUIRED 如果当前没有事务,就新建一个事务,如果已经存在一个事务中,加入到这个事务中.详细解释在代码下方. 实例 员工service @Service public ...