<!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. Springboot 创建的maven获取resource资源下的文件的两种方式

    Springboot 创建的maven项目 打包后获取resource下的资源文件的两种方式: 资源目录: resources/config/wordFileXml/wordFileRecord.xm ...

  2. JMeter 参数意义

    样本数目:运行时得到的取样器响应结果个数 最新样本:最近一个取样器结果的响应时间 平均:所有取样器结果的响应时间平均值 偏离:所有取样器结果的响应时间标准差 吞吐量:每分钟响应的取样器结果个数 中值: ...

  3. 【JZOJ4791】【NOIP2016提高A组模拟9.21】矩阵

    题目描述 在麦克雷的面前出现了一个有n*m个格子的矩阵,每个格子用"."或"#"表示,"."表示这个格子可以放东西,"#" ...

  4. Spring中使用DataSourceTransactionManager进行事务管理的xml配置

    在一个业务的实现过程中,可能需要多条sql完成对数据库的操作,比如账户登录,需要匹配用户名和密码,然后要增加积分,还要记录登录的ip和时间,这可能需要三个sql语句,这三个语句应当是一个整体,任意一个 ...

  5. Directx教程(27) 简单的光照模型(6)

    原文:Directx教程(27) 简单的光照模型(6)      从myTutorialD3D11_15到myTutorialD3D11_19的工程中,我们都只有一个光源,光源的位置在LightCla ...

  6. sql —— 自动增长列

    1.设置自动增长列 设置完毕添加数据这个字段就不用再手动添加了,会从10001开始,每条数据自动加1.

  7. 【JZOJ4890】【NOIP2016提高A组集训第14场11.12】随机游走

    题目描述 YJC最近在学习图的有关知识.今天,他遇到了这么一个概念:随机游走.随机游走指每次从相邻的点中随机选一个走过去,重复这样的过程若干次.YJC很聪明,他很快就学会了怎么跑随机游走.为了检验自己 ...

  8. 【JZOJ1637】【ZJOI2009】狼和羊的故事

    题目描述 "狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．" Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干 ...

  9. hdu1848 sg打表

    果然是神器. #include<stdio.h> #include<string.h> #define maxn 1002 ],sg[maxn],hash[maxn]; voi ...

  10. C++中的union

    1:,像任何类一样,union可以指定保护标记使成员成为公用的.私有的或受保护的.默认情况下,union 表现得像 struct:除非另外指定,否则 union 的成员都为 public 成员. 2: ...