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 ...
随机推荐
- 天使玩偶:CDQ分治
这道好(du)题(liu)还是很不错的 挺锻炼代码能力和不断优化 卡常的能力的. 对于 每次询问 我都可以将其分出方向 然后 写 也就是针对于4个方向 左下 左上 右下 右上 这样的话 就成功转换了问 ...
- 状压dp的另一种形式
做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...
- 抽屉之Tornado实战（2）--数据库表设计
经过我们上次分析,数据库要有最基本的四张表,用户表,消息表,类型表,点赞表,评论表,接下来我们看着怎么设计吧 首先我们要清楚,表设计的代码是写在models下的 用户表 #一张表对应一个类 class ...
- Matlab 快捷键 命令
1. 在命令窗口(Command Window)中: 1) [上.下键]――切换到之前.之后的命令,可以重复按多次来达到你想要的命令 2) clc――清除命令窗口显示的语句,此命令并不清空当前工作区的 ...
- java之面向对象的基础知识
面向对象其实是种思想,凡是思想都是比较抽象的,所以我们总要找到一些方法使它便于我们理解:建模就是最常用的方式,而建模的一个特点就是减少关注度,尽量减少对具体细节的关注,这在面向对象三大特性中深有体现. ...
- caffe 测试时间报错 Aborted at unix time
今天测试时间报错,具体如下图: 在网上查了一下,大概的原因是由于程序中使用了随机函数造成的,后来检查了一下prototxt中有可能含有随机数的地方,去掉之后就可以了,包括shuffle:true,以及 ...
- 初识waindows窗体程序错题整理
解析:A:Items表示集合B:获取或设置 ComboBox 的可编辑部分中选定的文本.C:SelectedIndex是索引D:获取或设置 控件中选定项的模板 解析:本题目考不同窗体之间跳转的方法,使 ...
- 前端HTML目录
前端 HTML 简介 前端 HTML文档结构介绍 前端 HTML文档 详解 前端 HTML 注释 前端 HTML标签介绍 前端 HTML的规范 前端 HTML 常用标签 head标签相关内容 前端 H ...
- Python3学习之路~4.4 软件目录结构规范
为什么要设计好目录结构? 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定义好组织 ...
- Windows XP解决显示桌面图标消失的问题
1.依次单击“开始”,“运行”,在运行对话框中输入regsvr32 /n /i:u shell32.dll,按回车键 2.弹出“shell32.dll中的DllInstall成功”的窗口,表明已将数据 ...