<!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="./lib/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

     <style>

         li {

             width:100%;

             border : 1px dashed #999;

             margin : 5px;

             line-height : 35px;

             padding-left: 5px;

             font-size: 12px;

         }

         li:hover{

             background-color: antiquewhite;

             transition: all 0.8s ease;

         }

         .v-enter,

         .v-leave-to{

             opacity: 0;

             transform: translateY(80px);

         }

         .v-enter-active,

         .v-leave.active{

             transition : all 0.6s ease;

         }

         /* .v-move 和 .v-leave-active 配合使用能够实现列表后续的元素渐进 */

         .v-move {

             transition: all 0.6s ease;

         }

         .v-leave-active {

             position: absolute;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div>

             <label for="">ID:

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

             </label>

             <label for="">Name:

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

             </label>

             <input type="button" value="添加" @click="add">

         </div>

         <ul>

             <!-- <li v-for="item in list" :key="item.id">

                 {{ item.id }} --- {{  item.name }}

             </li> -->

             <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环出来的，不能使用

             transition 包裹，需要使用 transitionGroup -->

             <!-- appear属性实现页面载入时的入场效果 -->

             <!-- vue默认会渲染成span标签，tag指定渲染为ul -->

             <transition-group appear tag="ul">

                 <li v-for="(item,i) in list" :key="item.id" @click="del(i)">

                     {{ item.id }} -- {{ i }} -- {{ item.name }}

                 </li>

             </transition-group>

         </ul>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 id: '',

                 name: '',

                 list: [{

                         id: 1,

                         name: '张三'

                     },

                     {

                         id: 2,

                         name: '李四'

                     },

                     {

                         id: 3,

                         name: '王五'

                     },

                     {

                         id: 4,

                         name: '王金'

                     },

                 ]

             },

             methods: {

                 add() {

                     this.list.push({

                         id: this.id,

                         name: this.name

                     });

                     this.id = this.name = '';

                 },

                 del(index) {

                     this.list.splice(index,1);

                 }

             },

         })

     </script>

 </body>

 </html>

Vue系列之 => 列表动画的更多相关文章

  1. VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  2. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  3. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  4. vue学习-day03（动画，组件）

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

  5. 第 2 篇：上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  6. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  7. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  8. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  9. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. 《HTTP - http报文》

    还时推荐一首歌 - 那吾克热<纸飞机> 有没有突然想要个孩子的冲动,哈哈. 读 第三章<HTTP报文内的HTTP信息> 总结 1:用于HTTP协议交互叫做HTTP报文,请求端( ...

  2. eclipse怎么解决Failed to load the JNIshared library

    Q: 打开eclipse打开报Failed to load the JNIshared library的错误. A:jdk的位数跟eclipse位数一致即可解决. 把eclipse下载64位即可 cm ...

  3. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  4. Servlet (三)HttpServletResponse

    package cn.sasa.serv; import java.io.IOException; import javax.servlet.ServletException; import java ...

  5. java 线程 （二） 线程池

    package cn.sasa.demo2; import java.util.concurrent.ExecutorService; import java.util.concurrent.Exec ...

  6. linux批量替换文本字符串

    (一)通过vi编辑器来替换.vi/vim 中可以使用 :s 命令来替换字符串.:s/well/good/ 替换当前行第一个 well 为 good:s/well/good/g 替换当前行所有 well ...

  7. ES6 --- JS异步编程的几种解决方法及其优缺点

    导言: 我们都知道 JS 是单线程的,这也正是异步编程对于 JS  很重要的原因,因为它无法忍受耗时太长的操作.正因如此有一系列的实现异步的方法. 方法一  setTimeout 常用于:定时器,动画 ...

  8. 10.8-uC/OS-III内部任务（中断处理任务 OS_IntQTask()）

    1.当设置OS_CFG.H中的OS_CFG_ISR_POST_DEFERRED_EN为1时, uC/OS-III就会创建一个任务,它的作用是尽快完成ISR中对post函数的调用, 将信号量.消息等对象 ...

  9. OpenWrt 路由系统上抓包

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/qianguozheng/article/details/32108093 前言: 做路由器开发,难免 ...

  10. 如何为DigitalOcean上的服务器配置SSH密钥

    本指南适用于mac OS和Linux,windows用户请绕道. 通常,当你启动DigitalOcean droplets时,只要过程完成,你会收到一封电子邮件,让你知道droplets的IP地址和密 ...