<!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. 蚁群算法MATLAB解VRP问题

    Excel  exp12_3_2.xls内容: ANT_VRP函数: function [R_best,L_best,L_ave,Shortest_Route,Shortest_Length]=ANT ...

  2. sqlserver 一些基本的语法

    1. STR()函数    这是将数字转换为字符串的快捷函数,这个函数有3个参数:数值,总长度,和小数位   如: select str(123.4,8,4) = 123.4000  如长度不够,则左 ...

  3. koa上传excel文件并解析

    1.中间键使用 koa-body npm install koa-body --save const koaBody = require('koa-body'); app.use(koaBody({ ...

  4. 安装tomcat(fedora16)

    sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps   s ...

  5. Directx11教程(53) D3D11管线(8) GS的调度执行

    原文:Directx11教程(53) D3D11管线(8) GS的调度执行        在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行 ...

  6. 【水滴石穿】AB-B-Clone

    地址: 源码 运行效果 无别的效果,代码如下 //index.js /** * @format * @lint-ignore-every XPLATJSCOPYRIGHT1 */ import {Ap ...

  7. js函数易犯的错误

    1.定义一个js函数时不能写在另一个函数里面. 2.定义一个打开网页自动执行的函数,一定要注意加载的顺序.如果是不是自动执行的,而是等页面加载完后事件触发的,那写在任何地方都没问题. 错误的:

  8. JAVA高级特性--String/StringBuffer/Builder

    String String对象一旦创建就不能改变 是常量 需要进行大量字符串操作应采用StringBuffer/StringBuilder  最终结果转换成String对象 StringBuffer ...

  9. 巨蟒python全栈开发-第11阶段 ansible3_2入门八个模块

    大纲: 1.file模块 2.fetch模块 3.yum&&pip模块 4.service模块 5.cron模块 6.user模块 7.group模块

  10. Mysql 查询一天中，每个小时数据的数量

    SELECT HOUR(e.time) as Hour,count(*) as Count FROM error_log e WHERE e.date = '2017-09-02' GROUP BY ...