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

  <script src="./lib/vue-2.4.0.js"></script>

  <style>

    li {

      border: 1px dashed #999;

      margin: 5px;

      line-height: 35px;

      padding-left: 5px;

      font-size: 12px;

      width: 100%;

    }

    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;

    }

    /* 下面的 .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 属性 -->

      <!-- 给 ransition-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>

Vue 列表动画实现的更多相关文章

  1. Vue列表动画----自己做的

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

  2. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  3. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

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

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

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

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

  6. 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 ...

  7. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  8. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  9. 049——VUE中使用animation与transform实现vue的动画效果

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

随机推荐

  1. hive拉链表取数

    例如,一个借款用户在hive上的拉链表.(end_dt存放逻辑与普通介绍的拉链表不一致) 需要拉去它在2019-05-01日的状态, 取数逻辑是: select * from tb where sta ...

  2. 使用SQLyog将Mysql中的表导出为Excel

    有时会有这样的需求:将MYSQL数据库中的某个表格导出,存为Excel文件.下面介绍步骤: 1.打开SQLyog,选中要导出的表 2.右键--备份/导出--导出表数据作为... 3.如图选择 Exce ...

  3. Leetcode867.Transpose Matrix转置矩阵

    给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7] ...

  4. 大数据技术之HA 高可用

    HDFS HA高可用 1.1 HA概述 1)所谓HA(High Available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件的HA ...

  5. appium处理混合APP_获取上下文（切换句柄）

    //混合APP的处理 //getContextHandles():获取所有可用的上下文//context():设置上下文//getContext():获取当前上下文 //1. getContext() ...

  6. “获取access_token”接口新增IP白名单保护

  7. twitter、facebook、pinterest、linkedin 分享代码

    twitter.facebook.pinterest.linkedin 分享代码 http://www.cnblogs.com/adstor-Lin/p/3994449.html

  8. 2019-10-26-dotnet-core-发布只有一个-exe-的方法

    title author date CreateTime categories dotnet core 发布只有一个 exe 的方法 lindexi 2019-10-26 8:42:7 +0800 2 ...

  9. 2017 ACM-ICPC 亚洲区（乌鲁木齐赛区）网络赛 H Skiing【拓扑排序，关键路径】

    2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛  H Skiing In this winter holiday, Bob has a plan for skiing at the moun ...

  10. LightOJ 1236 Pairs Forming LCM【整数分解】

    题目链接: http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1236 题意: 找与n公倍数为n的个数. 分析: ...