<!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. Java笔记: 初始化块

    Java语言提供了很多类初始化的方法,包括构造器.初始化器等.除了这两种方法之外,我们还可以用初始化块(initialization block)来实现初始化功能. 基本语法 初始化块是出现在类声明中 ...

  2. 爬虫(十六)：Scrapy框架(三) Spider Middleware、Item Pipeline

    1. Spider Middleware Spider Middleware是介入到Scrapy的Spider处理机制的钩子框架. 当Downloader生成Response之后,Response会被 ...

  3. JS：利用for循环进行数组去重

    <script> var a = [1, 3, 2, 4, 5, 3, 2, 1, 4, 6, 7, 7, 6, 6]; //示例数组    var b = []; for(var i = ...

  4. 在 Delphi 中使用微软全文翻译的小例子

    使用帮助 需要先去申请一个 AppID: http://www.bing.com/toolbox/bingdeveloper/使用帮助在: http://msdn.microsoft.com/en-u ...

  5. 京东云与AI 10 篇论文被AAAI 2020 收录，京东科技实力亮相世界舞台

    美国时间2月7-12日,AAAI 2020大会在纽约正式拉开序幕,AAAI作为全球人工智能领域的顶级学术会议,每年评审并收录来自全球最顶尖的学术论文,这些学术研究引领着技术的趋势和未来.京东云与AI在 ...

  6. 5 —— node —— 响应一段中文给客户端

    const http = require('http'); const server = http.createServer(); server.on('request',function(req,r ...

  7. DRF项目之实现用户密码加密保存

    在DRF项目的开发中,我们通过直接使用序列化器保存的用户信息时,用户的密码是被明文保存到数据库中. 代码实现: def create(self, validated_data): '''重写creat ...

  8. 069-PHP数组下标

    <?php $arr=array(98,'hello',67,'A',85,NULL); //定义一个数组 $x=0; //定义三个作为下标的变量 $y=3; $z=5; echo " ...

  9. 第二阶段scrum-5

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 注册登陆界面功能正在实装,前端制作完成 数据库配置中

  10. spring boot配置druid连接池连接mysql

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