<!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. 003.CI4框架CodeIgniter, 控制器Controllers的访问地址

    01.我们新建一个System文件夹,然后创建一个Login.php类,代码如下: <?php namespace App\Controllers\System; use App\Control ...

  2. 012-PHP创建一个多维数组

    <?php $Cities = array( //二维数组array() "华北地区"=>array( "北京市", "天津市" ...

  3. FPGA调试技巧（Quartus 15.1 Standard平台）

    1.在SignalTap II Logic Analyzer(stp)观测信号,需要将待观察寄存器.网络节点的综合器属性设为synthesis noprune和synthesis keep,防止综合器 ...

  4. Java Break 与 Continue

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  5. 响应式布局之 px、em、 rem

    一.写在前面的话 作为一面前端开发者,对 px .em . rem 应该是再熟悉不过了,但大多数小伙伴应该都和我一样仅仅停留在了解的层面,并不是实质性的掌握它们.本文对三者进行了详细的总结和详细说明, ...

  6. maven的本地仓库

    今天新建的一个maven项目的依赖出了问题,想删除本地仓库的相关依赖文件夹,再重新加载,结果半天没找到文件夹位置. 我因为是改了maven的setting文件的,所以是直接到设置的文件夹里面找,结果半 ...

  7. Linux学习《第四章脚本》20200222

  8. Golang函数-函数的基本概念

    Golang函数-函数的基本概念 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.函数的概述 1>.函数定义语法格式 Go语言函数定义格式如下: func 函数名( 函数参 ...

  9. 027-PHP编码和解码函数base64

    <?php $data = "我爱PHP";//解码前的值 print("我爱PHP: " . base64_encode($data)); //进行解码 ...

  10. 在Ubuntu下搭建Android开发环境(AndroidStudio)

    在ubuntu下搭建Android开发环境 本教程的开发环境的搭建有三个大步骤:安装Java jdk,安装Android studio,安装sdk 笔者搭建环境的时候用的是Ubuntu18.04 1. ...