1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <script src="./lib/jquery2.1.4.min.js"></script>
  10.      <script src="./lib/Vue2.5.17.js"></script>
  11.      <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
  12.      <style>
  13.          li {
  14.              width:100%;
  15.              border : 1px dashed #999;
  16.              margin : 5px;
  17.              line-height : 35px;
  18.              padding-left: 5px;
  19.              font-size: 12px;
  20.          }
  21.  
  22.          li:hover{
  23.              background-color: antiquewhite;
  24.              transition: all 0.8s ease;
  25.          }
  26.          .v-enter,
  27.          .v-leave-to{
  28.              opacity: 0;
  29.              transform: translateY(80px);
  30.          }
  31.  
  32.          .v-enter-active,
  33.          .v-leave.active{
  34.              transition : all 0.6s ease;
  35.          }
  36.  
  37.          /* .v-move 和 .v-leave-active 配合使用能够实现列表后续的元素渐进 */
  38.          .v-move {
  39.              transition: all 0.6s ease;
  40.          }
  41.          .v-leave-active {
  42.              position: absolute;
  43.          }
  44.      </style>
  45.  </head>
  46.  
  47.  <body>
  48.      <div id="app">
  49.          <div>
  50.              <label for="">ID:
  51.                  <input type="text" v-model="id">
  52.              </label>
  53.  
  54.              <label for="">Name:
  55.                  <input type="text" v-model="name">
  56.              </label>
  57.              <input type="button" value="添加" @click="add">
  58.          </div>
  59.  
  60.          <ul>
  61.              <!-- <li v-for="item in list" :key="item.id">
  62.                  {{ item.id }} --- {{  item.name }}
  63.              </li> -->
  64.              <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环出来的，不能使用
  65.              transition 包裹，需要使用 transitionGroup -->
  66.              <!-- appear属性实现页面载入时的入场效果 -->
  67.              <!-- vue默认会渲染成span标签，tag指定渲染为ul -->
  68.              <transition-group appear tag="ul">
  69.                  <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
  70.                      {{ item.id }} -- {{ i }} -- {{ item.name }}
  71.                  </li>
  72.              </transition-group>
  73.          </ul>
  74.      </div>
  75.      <script>
  76.          var vm = new Vue({
  77.              el: '#app',
  78.              data: {
  79.                  id: '',
  80.                  name: '',
  81.                  list: [{
  82.                          id: 1,
  83.                          name: '张三'
  84.                      },
  85.                      {
  86.                          id: 2,
  87.                          name: '李四'
  88.                      },
  89.                      {
  90.                          id: 3,
  91.                          name: '王五'
  92.                      },
  93.                      {
  94.                          id: 4,
  95.                          name: '王金'
  96.                      },
  97.                  ]
  98.              },
  99.              methods: {
  100.                  add() {
  101.                      this.list.push({
  102.                          id: this.id,
  103.                          name: this.name
  104.                      });
  105.                      this.id = this.name = '';
  106.                  },
  107.                  del(index) {
  108.                      this.list.splice(index,1);
  109.                  }
  110.              },
  111.          })
  112.      </script>
  113.  </body>
  114.  
  115.  </html>

Vue系列之 => 列表动画的更多相关文章

  1. VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  2. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  3. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  4. vue学习-day03（动画，组件）

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

  5. 第 2 篇：上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  6. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  7. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  8. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  9. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. 20165317 Linux安装及学习

    Linux安装及学习 一.Linux的安装 我通过virtualbox和ubuntu官网下载了virtualbox5.2.6和ubuntu17.04版本. 在操作过程中,我基本是按照老师的步骤进行的, ...

  2. 20165336 2017-2018-2 《Java程序设计》第2周学习总结

    学号 2017-2018-2 20165336 <Java程序设计>第2周学习总结 教材学习内容总结 第二章 标识符第一个字符不能是数字 标识符不能是关键字 byte型变量的取值范围是-2 ...

  3. Python创建第一个django应用

    在helloworld工程的基础上,我们准备创建第一个基于web的django应用,把这个应用名字命名为Guest   1.首先,是如何创建这个应用包,当然第一选择我们可以进入到cmd中,执行如下命令 ...

  4. Linux发展历程

    阅读内容 一.linux基础 二.linux发展史 三.linux图形界面 回到顶部 一.linux基础 1.操作系统的分类 1.1 Windows 系统 优点:Windows 用户群体大:应用软件多 ...

  5. abap 通过importing 和 exporting 调用其它函数

    1:其它函数的(输入或输出)参数名都在=号左边.

  6. 百度云同同步盘 mac版

    百度云同步盘

  7. 《全栈性能Jmeter》-3JMeter体系结构

  8. WebActivatorEx—动态注册httpmodle

    源代码:https://github.com/davidebbo/WebActivator/tree/master/WebActivator unity使用演示 WebActivator类库提供了3种 ...

  9. python获取当前，昨天，明天时间

    import datetime nowTime = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')#现在 pastTimeMinutes = ...

  10. 从零开始一起学习SLAM | 神奇的单应矩阵

    小白最近在看文献时总是碰到一个奇怪的词叫“homography matrix”,查看了翻译,一般都称作“单应矩阵”,更迷糊了.正所谓:“每个字都认识,连在一块却不认识”就是小白的内心独白.查了一下书上 ...