Vue系列之 => 列表动画
<!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系列之 => 列表动画的更多相关文章
- VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1 列表中增加和删除元素 <style> .my-ite ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- vue学习-day03（动画，组件）
目录: 1.品牌列表-从数据库获取列表 2.品牌列表-完成添加功能 3.品牌列表-完成删除功能 4.品牌列表-全局配置数据接口的根域名 5.品牌列表-全局配置emulateJS ...
- 第 2 篇：上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- 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 ...
随机推荐
- day4_函数简单介绍
一.函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasc ...
- tensorflow入门笔记（一） tf.app.flags.FLAGS
tf.app.flags.DEFINE_xxx()就是添加命令行的optional argument(可选参数),而tf.app.flags.FLAGS可以从对应的命令行参数取出参数.举例如下: FL ...
- bug:*** Collection <__NSArrayM: 0x1c444d440> was mutated while being enumerated.
崩溃提示:Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <CAL ...
- JDK源代码学习系列04----ArrayList
JDK源代码学习系列04----ArrayList 1 ...
- mac 安装yarn失败
转载:https://www.jianshu.com/p/d4298239e1e4, yarn 下载一些包的时候总是报错,在控制台执行下面的语句后可以下载,具体原因尚未清楚待研究 git config ...
- Jsp与Servlet面试题
一.jsp有哪些内置对象作用分别是什么 答:JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): request 用户端请求,此请求会包含来自GET/POST请求的参数 respo ...
- SSLServerSocket代码实现
理解一个设计思想,结合代码是最好的途径.安全套接字服务端的实现代码如下: X509TrustManager MyX509TrustManager = new X509TrustManager() { ...
- 新发现：排序算法时间复杂度只有O(3n)，命名为"wgw"排序法
思路:首先在待排序数组i[]中找出最大的值,以(最大值+1)的大小创建一个空数组kk[],然后遍历待排序数组i[]中的值n,其值n对应数组kk[]中的第n个元素加1.最后再把数组kk[]排好序的值赋回 ...
- script命令录屏
关于linux上的操作,我们的确可以使用'history'命令来显示出来操作记录,但是有些时候,我们不仅仅需要知道做了什么,还需要知道操作的时候,产生了什么效果,这个时候‘history’命令就显示无 ...
- [LeetCode] 系统刷题1_代码风格及边界
代码风格 说自己不清楚的算法,比如KMP,如果解释不清楚或者写不出来的算法建议不提 注意代码的缩进以及空格的合理运用,使得代码看起来比较整洁有条理 注意边界的条件以及越界 误区: 算法想出来还仅仅不够 ...