<!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. Spark Scheduler 模块（上）

    在阅读 Spark 源代码的过程中,发现单步调试并不能很好的帮助理解程序.这样的多线程的分布式系统,更好的阅读源代码的方式是依据模块,分别理解.   在包 org.apache.spark 下面有很多 ...

  2. vue+ui

    一.elementui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.u ...

  3. HDU 5504：GT and sequence

    GT and sequence  Accepts: 95  Submissions: 1467  Time Limit: 2000/1000 MS (Java/Others)  Memory Limi ...

  4. HDU 2586 LCA-Tarjan

    还是LCA-tarjan算法,跟POJ 1330做法基本类似,只是这个题目要求输出两个点的最短距离,其实利用LCA的性质,就是 两个点分别到最近公共祖先的距离之和 一开始本来想用并查集把路径长度给找出 ...

  5. POJ 1330 LCA最近公共祖先 离线tarjan算法

    题意要求一棵树上,两个点的最近公共祖先 即LCA 现学了一下LCA-Tarjan算法,还挺好理解的,这是个离线的算法,先把询问存贮起来,在一遍dfs过程中,找到了对应的询问点,即可输出 原理用了并查集 ...

  6. 学习spring的第三天

    1.手动的依赖注入出了昨天所讲的利用<property>和<constructor-arg>标签设置注入外还可以通过属性值设置,这样就少些了一些代码... 1.1:直接在< ...

  7. 8 ~ express ~ 基于数据库的验证

    1,首先 在router/api.js 中引入数据库定义好的模型  /models/User.js var User = require('../models/User') //User返回的是一个构 ...

  8. BZOJ：2242: [SDOI2011]计算器

    题解:BSGS 问题:map空间 BSGS判无解 a%p!=0 0与最小非负整数 有区别 函数传参类型转换int->long long long long ->int; 费马小定理充分必要 ...

  9. Abstract抽象类 && Interface接口

    # 抽象类 ## 将相同的但是不确定的动作提取出来,抽象化,抽象类的意义在于,在子类中进行实现. ## 抽象类可以被继承,子类继承抽象类时,需要对抽象方法进行完全实现. ## 抽象方法不能有方法体. ...

  10. Java语言学习总结 扩展篇 DateFormat类

    DateFormat类 java.text .DateFormat 是 日期/时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换:也就是可以在Date对象与String对象之间进 ...