vue-列表动画
实现列表动画
li {
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
li:hover {
background-color: hotpink;
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;
}
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- <ul> -->
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
<!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
<transition-group appear tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
{{item.id}} --- {{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div>
// 创建 Vue 实例,得到 ViewModel
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(i) {
this.list.splice(i, 1)
}
}
});
vue-列表动画的更多相关文章
- Vue列表动画----自己做的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 列表动画实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- 从零开始学 Web 之 Vue.js(五)Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- VUE3 之 列表动画 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1 列表中增加和删除元素 <style> .my-ite ...
- 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 ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- JS调用MD5加密
为了系统的安全,前端一般需要对密码进行MD5加密,然后传输给后台处理.MD5的英文是Message Digest Algorithm(信息摘要算法),是不可逆的算法,只能通过暴力破解,所以较为安全. ...
- 洛谷P3128 [USACO15DEC]最大流Max Flow (树上差分)
###题目链接### 题目大意: 给你一棵树,k 次操作,每次操作中有 a b 两点,这两点路上的所有点都被标记一次.问你 k 次操作之后,整棵树上的点中被标记的最大次数是多少. 分析: 1.由于数 ...
- idea实战技巧
一.背景 为什么想写这个,因为编码一线更多的是实战,实战中,可能一个快捷键,一个小技巧,就能省很多时间. 本文会持续记录,持续更新. 二.技巧 1.全局替换(带正则) 场景是: 多profile的情况 ...
- Java生鲜电商平台-电商虚拟币的充值与消费思考
Java生鲜电商平台-电商虚拟币的充值与消费思考 项目背景 最近由于项目业务原因,需要为系统设计虚拟币的充值及消费功能.公司内已经有成熟的支付网关服务,所以重点变成了如何设计项目内虚拟币的充值流程,让 ...
- 1-5-JS基础-数组应用及实例应用
array 数组 一般简写arr 格式 var arr [ '第1个','第2个','第3个','第4个' ] 最后一个不要叫逗号 alert(arr.length) 弹出数组长度 4个 alert( ...
- SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里
SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里 如下的销售订单,有多个ITEM, 为其中的第一个ITEM创建了DN 80016362, 如果业务发现需要修改该交货单,将销售订单里的 ...
- 并发编程 ~~~ 多进程~~~进程创建的两种方式, 进程pid, 验证进程之间的空间隔离, 进程对象join方法, 进程对象其他属性
一 进程创建的两种方式 from multiprocessing import Process import time def task(name): print(f'{name} is runnin ...
- Centos下YUM源配置及相关问题应用篇
yum源配置在工作中会经常用到,特别是安装数据库时,一个个去安装依赖包比较耗时,直接配置好yum安装即可. (特别提醒:redhat有时会提示系统未注册,要求你注册,这个只对需要连接公网的yum源产生 ...
- Centos7.6 Apache 虚拟机禁止访问IP,允许访问多域名多个虚拟目录设置
存放配置文件路径 /etc/httpd/conf.d自定义命名,配置文件后缀格式确保 *.conf注:这是两个配置文件,也是两种方法. # 一个WEB目录# 禁止以IP地址形式访问<Virtua ...