<!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. POJ 1150 The Last Non-zero Digit 数论+容斥

    POJ 1150 The Last Non-zero Digit 数论+容斥 题目地址: id=1150" rel="nofollow" style="colo ...

  2. <第一周>降维

    PCA 矩阵的主成分就是其协方差矩阵对应的特征向量,按照对应的特征值大小进行排序,最大的特征值为第一主成分,以此类推 主要过程 对所有样本进行中心化 计算样本的协方差矩阵 XX．T 对协方差矩阵做特征 ...

  3. vs dump调试

    1. dump文件和pdb文件的匹配问题 >> 发布二进制文件时生成的pdb文件一定要保留,只有当发布的二进制文件和pdb文件是同时生成的才好正确调试. 2. dump文件和pdb文件放在 ...

  4. span元素和div元素的浮动效果

    首先看一段代码: <style> #right {margin: 10px;float:right;color:red;} #left {float:left;color:blue;} & ...

  5. 【python练手】获取城市天气质量

    #!/usr/bin/python # -*- coding: utf-8 -*- # get city pm2.5 and ranking # python2.7 import sys import ...

  6. AS2.2使用CMake方式进行JNI/NDK开发

    之前写过一篇比较水的文章Android手机控制电脑撸出HelloWorld 里面用到了JNI/NDK技术. 这篇文章给大家介绍下JNI/NDK开发.采用的是Android Studio2.2开发环境, ...

  7. 【JZOJ4787】【NOIP2016提高A组模拟9.17】数格子

    题目描述 输入 输出 样例输入 1 10000 3 10000 5 10000 0 0 样例输出 1 11 95 数据范围 每个测试点数据组数不超过10组 解法 状态压缩动态规划. 设f[i][j]表 ...

  8. Directx11教程(66) D3D11屏幕文本输出(1)

    原文:Directx11教程(66) D3D11屏幕文本输出(1)      在D3D10中,通过ID3DX10Font接口对象,我们可以方便的在屏幕上输出文字信息,一个DrawText函数就能解决所 ...

  9. day39-Spring 12-Spring的JDBC模板：快速入门

    Spring AOP的关键是它的底层的原理和思想,配置和使用并不是十分困难.AOP本身就是一个思想,是面向对象的延伸,不是用来替换面向对象的,而是用来解决面向对象中的一些问题的.在最初的时候提出过一个 ...

  10. phpexcel使用说明4

    <div class="postBody"> <div id="cnblogs_post_body"><p>PHPExcel ...