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 ...
随机推荐
- elasticsearch安装IK分词插件
一 打开网页:https://github.com/medcl/elasticsearch-analysis-ik/releases 这个是ik相关的包,找到你想下载的版本,下载对应的zip包 二 然 ...
- Python开发【笔记】：aiohttp搭建简易聊天室
简易聊天室: 1.入口main.py import logging import jinja2 import aiohttp_jinja2 from aiohttp import web from a ...
- 使用poi写excel文件
- 谈谈javascript数组排序方法sort()的使用，重点介绍参数使用及内部机制？
语法:arrayObject.sort(sortby) 参数sortby可选,规定排序顺序,必须是函数: 注:如果调用该方法时没有使用参数,将按字符编码的顺序进行排序,要实现这一点,首先应把数组的元素 ...
- 【托业】【新托业TOEIC新题型真题】学习笔记8-题库五->P7
———————————————————单词———————————————————— minister 部长 construction contractor 施工方 commence 开始:着手 bac ...
- dwr的ScriptSession和HttpSession分析
1.关于ScriptSession ScriptSession不会与HttpSession同时创建 当我们访问一个页面的时候,如果是第一次访问,会创建一个新的HttpSession,之后再访问的时候, ...
- 20170811 使用Bootstrap框架写个页面
采用Bootstrap-table 做的页面. 1. 增加Query 查询功能,涉及Ajax 来加载页面数据吧! <meta charset="UTF-8"> < ...
- DBGridEh基本操作
导出到excel等文件类型 uses DBGridEhImpExp//导出到文本文件 TDBGridEhExportAsText //导出到Unicode文本 TDBGridEhExportAsUni ...
- 使用 HTMLTestRunner 模块生成HTML格式的测试报告文件
1.下载HTMLTestRunner.py HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告.HTMLTestRunne ...
- sap QG3搜索
先创建一个QG3系统,创建一个用户. 1: 进入搜索模板 2: 选择软件组件,点击执行 3: 设置过滤条件. 4: 选择在哪一列 设置过滤条件. 5: 定义搜索值 6: 设置值 可以将搜索的结果删除. ...