<!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. C++学习笔记(1)-构造函数与析构函数

    1.C++规定,每个类必须有默认的构造函数,没有构造函数就不能创建对象. 2.若没有提供任何构造函数,那么c++自动提供一个默认的构造函数,该默认构造函数是一个没有参数的构造函数,它仅仅负责创建对象而 ...

  2. Leetcode908.Smallest Range I最小差值1

    给定一个整数数组 A,对于每个整数 A[i],我们可以选择任意 x 满足 -K <= x <= K,并将 x 加到 A[i] 中. 在此过程之后,我们得到一些数组 B. 返回 B 的最大值 ...

  3. redis是当前流行的nosql数据库

    redis是当前流行的nosql数据库,很多网站都用它来做缓存,今天我们来安装并配置下redis 二.安装并配置redis 1.安装redis sudo apt-get install redis-s ...

  4. scala实现定时任务的方法

    /** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...

  5. node.js的path模块

    path模块的各种API path.join([...paths]) 参数:paths <string> ,paths参数是字符串,这些字符串按路径片段顺序排列,(A sequence o ...

  6. SSH免密码登录的方法

    在你的自己的机器下面使用ssh-keygen命令来实现创建公钥 将你~/.ssh目录中的id_rsa.pub这个文件拷贝到你要登录的服务器的~/.ssh目录中,然 后再运行以下命令来将公钥导入到~/. ...

  7. LintCode_111 爬楼梯

    题目 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 比如n=3,中不同的方法 返回 3 1 2 3 5 8 13... step[2] = ...

  8. SpringMvc表单标签库

    HTML密码框 <td><form:label path="password">密码:</form:label></td><t ...

  9. Spring CommonsMultipartResolver上传文件小结

    自从业至今,文件上传与IO流之类的调用,一直是理解比较模糊的地方,大多就这网上搜到的资料抄抄改改草草了事,内部原理一直不甚了解,今日我们通过Spring的CommonsMultipartResolve ...

  10. SQLAlchemy中filter和filer_by的区别

    filter: session.query(MyClass).filter(MyClass.name == 'some name') filter_by: session.query(MyClass) ...