<!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. JS: 子项可以来回交换的两个下拉列表

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  2. P30 Pro劲敌！DxO官宣新机：排行榜又要变

    均为111分,接着是华为Mate 20 Pro.P20 Pro和三星Galaxy S10+,三款机型综合得分均为109分,前10名最后三款机型分别是小米9.iPhone XS Max和HTC U12+ ...

  3. 精简总结redis/rabbitmq/zookeeper在linux centos7上的安装

    因为本博主之前已经写过了相关的一些安装及集群,可以参考前面的记录,但是由于博最近更换了VM14和centos7,为了适应这些环境,所以后续会逐渐重新搭建相关环境,并对之前的安装思路进一步精简梳理,以期 ...

  4. eclipse启动tomcat访问localhost:8080报404

    直接双击tomcat\bin目录下面的startup.bat启动 是没问题 的 但是eclipse启动tomcat访问localhost:8080报404 解决方案如下: 双击红色圈里面的tomcat ...

  5. 149-PHP大小写转换函数

    <?php $str='PHP is a very good programming language.'; //定义一个字符串 echo "未经处理的字符串:<br /> ...

  6. 115-PHP实例化和不实例化输出类常量

    <?php class boy{ //定义男孩类 const sex='男'; public $age=15; } echo '不实例化对象输出类常量:'.boy::sex; $boy=new ...

  7. Java中如何序列化一个对象（转）

    转自:http://blog.csdn.net/chx10051413/article/details/40784667 http://www.cnblogs.com/baoendemao/p/380 ...

  8. 编译Linux

    下载内核源文件 https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux-stable.git/ 生成.config配置文件 make ...

  9. Python 打开文件(File Open)

    版权所有,未经许可,禁止转载 章节 Python 介绍 Python 开发环境搭建 Python 语法 Python 变量 Python 数值类型 Python 类型转换 Python 字符串(Str ...

  10. Day 13：File类的常用方法

    路径问题: 绝对路径: 该文件在硬盘上 的完整路径.绝对路径一般都是以盘符开头的. 相对路径:  相对路径就是资源文件相对于当前程序所在的路径.  . 当前路径   .. 上一级路径  注意: 如果程 ...