<!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="./vue-2.5.16.js"></script>

  <style>

    ul {

      padding: 0;

      margin: 0;

      list-style: none;

    }

    li {

      border: 1px dashed #ccc;

      background-color: #eee;

      line-height: 35px;

      font-size: 12px;

      padding-left: 10px;

      margin: 10px 0;

    }

    .v-enter,

    .v-leave-to {

      opacity: 0;

      transform: translateY(300px);

    }

    .v-enter-active,

    .v-leave-active {

      transition: all 2s ease;

    }

    /* 控制 即将被删除的那个元素，脱离标准流，从而允许后续的元素，往上顶 */

    .v-leave-active {

      position: absolute;

      width: 100%;

    }

    /* vue自带的效果 控制 那些将要往上顶的元素，通过 过渡，渐渐地顶上来 */

    .v-move {

      transition: all 2s ease;

    }

  </style>

</head>

<body>

  <div id="app">

    <div>

      <input type="text" v-model="name">

      <button @click="add">添加</button>

    </div>

    <ul>

      <!-- 1. 如果要为列表添加动画，必须使用 transition-group 把 v-for 循环渲染的元素，包裹起来  -->

      <transition-group>

        <li v-for="item in arr" :key="item.id" @click="remove(item.id)">

          {{item.name}}

        </li>

      </transition-group>

    </ul>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        // 新添加的用户名称

        name: '',

        arr: [

          { id: 1, name: '张三' },

          { id: 2, name: '李四' },

          { id: 3, name: '赵六' }

        ]

      },

      methods: {

        add() {

          const user = { id: this.arr.length + 1, name: this.name }

          this.arr.push(user)

          this.name = ''

        },

        remove(id) {

          const i = this.arr.findIndex(x => x.id === id)

          this.arr.splice(i, 1)

        }

      }

    });

  </script>

</body>

</html>

Vue.js 之 过渡动画的更多相关文章

  1. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...

  2. 058_末晨曦Vue技术_过渡 & 动画之过渡的类名

    进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...

  3. VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

    本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...

  4. Vue - 解决路由过渡动画抖动问题

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...

  5. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...

  6. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  7. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  8. Vue.js 系列教程 5：动画

    原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...

  9. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

随机推荐

  1. CSS样式表——样式

    样式: 1)大小 width:200px;       或width:100%;                           //样式中要加单位 height:100px; 2)背景 back ...

  2. Web application architecture overview

  3. python scipy优化器模块（optimize）

    pyhton数据处理与分析之scipy优化器及不同函数求根 1.Scipy的优化器模块optimize可以用来求取不同函数在多个约束条件下的最优化问题,也可以用来求取函数在某一点附近的根和对应的函数值 ...

  4. 吴裕雄--天生自然java开发常用类库学习笔记：Iterator接口

    import java.util.List ; import java.util.ArrayList ; import java.util.Iterator ; public class Iterat ...

  5. mysql IF-IFNULL和IF-ISNULL同样逻辑的运行差别

    首先,目标记录是存在的 SELECT * FROM d_device_user_bind dub WHERE dub.`uid`='222222222221' 其次, SELECT dub.uid,d ...

  6. nodejs - fs模块 - 文件操作

    1, fs.stat  检测是文件还是目录 2, fs.mkdir 创建目录 var fs = require('fs') fs.mkdir('./dir',function(err){ if(err ...

  7. C++编程学习（七） 循环结构

    1.continue:循环体中结束本次循环,直接进入下一次循环. 2.break:循环直接结束. 3.在for语句循环体中执行continue语句,程序会转到“表达式3”继续运行. 4.使用多重循环的 ...

  8. Java中的String介绍

    一.概述 String是代表字符串的类,本身是一个最终类,使用final修饰,不能被继承. 二.String字符串的特征 1. 字符串在内存中是以字符数组的形式来存储的. 示例如下,可以从String ...

  9. Spring Boot Hello World (restful接口)例子

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  10. Marvolo Gaunt's Ring（巧妙利用前后缀进行模拟）

    Description Professor Dumbledore is helping Harry destroy the Horcruxes. He went to Gaunt Shack as h ...