vue中渐进过渡效果实现
作者：笨笨猪1995 发布时间：2024-04-10 10:32:54
标签：vue,渐进,过渡
本文实例为大家分享了vue 渐进过渡效果，供大家参考，具体内容如下，供大家参考，具体内容如下
transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger：
<div v-for="item in list" transition="stagger" stagger="100"></div>
或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好的控制：
Vue.transition('stagger', {
stagger: function (index) {
// 每个过渡项目增加 50ms 延时
// 但是最大延时限制为 300ms
return Math.min(300, index * 50)
}
})
示例：html代码：
<div id="demo">
<input v-model="query">
<ul>
<li v-for="item in list | filterBy query"
transition="staggered"
stagger="100">
{{item.msg}}
</li>
</ul>
</div>
js代码：
new Vue({
el: '#demo',
data: {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
}
})
css代码：
ul {
padding-left: 0;
font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
transition: all .5s ease;
overflow: hidden;
margin: 0;
height: 20px;
}
.staggered-enter, .staggered-leave {
opacity: 0;
height: 0;
}
效果如下图：
0
投稿猜你喜欢
- Python中的三引号，3个单引号及3个双引号实际上3个单引号和3个双引号不经常用，但是在某些特殊格式的字符串下却有大用处。通常情况下我们用
- MySQL有的时候需要用到类似lastIndexOf的功能，然而它没有现成直接可用的函数，就需要自己来琢磨了。首先，MySQL提供了以下3个
本文实例讲述了Python队列RabbitMQ 使用方法。分享给大家供大家参考，具体如下：目前的exchange的路由策略是：每个需要队列的- 在 Python 中，* 和 ** 具有语法多义性，具体来说是有四类用法。1. 算数运算* 代表乘法** 代表乘方>>>
- 我们在平常的系统开发中常常会遇到像无限级分类这样的树型结构数据，现提供一个可用的数据库存储过程，可以完成树型结构数据的排序。环境：windo
- 目录前言数据结构常规实现string转[]byte[]byte转string高效实现性能测试总结前言当我们使用go进行数据序列化或反序列化操
- 一，封装封装是面向对象编程思想的重要特征之一。（一）什么是封装封装是一个抽象对象的过程，它容纳了对象的属性和行为实现细节，并以此对外提供公共
- 本文实例讲述了Python基于socket模块实现UDP通信功能。分享给大家供大家参考，具体如下：一 代码1、接收端import socke
- 本文实例讲述了js字符串操作方法。分享给大家供大家参考。具体如下：var str="This is my first Script
- MERGE 存储引擎把一组 MyISAM 数据表当做一个逻辑单元来对待，让我们可以同时对他们进行查询。构成一个 MERGE 数据表结构的各成
- 这篇文章主要介绍threading模块中的主类Thread的一些主要方法，实例代码如下：''' Crea
- 本文实例讲述了Python实现PS滤镜特效之扇形变换效果。分享给大家供大家参考，具体如下：这里用 Python 实现 PS 滤镜中的一种几何
- <div class=”A” style=”position:relative;”>A
- 下面从以下四种方案分析各自的优缺点。方案一：SELECT * FROM `table` ORDER BY RAND() LIMIT 0,1;
- 话不多说，请看代码：function removeRepeat(data) {var temp = "";var mai
- 前言今天小编带领大家用Python自制一个自动生成探索性数据分析报告这样的一个工具，大家只需要在浏览器中输入url便可以轻松的访问，如下所示
- 1、选择结构通过判断条件是否成立来决定分支的执行。2、选择结构形式：单分支、双分支、多分支。3、多分支结构，几个分支之间有逻辑关系，不能随意
- 本文介绍了PyTorch上搭建简单神经网络实现回归和分类的示例，分享给大家，具体如下：一、PyTorch入门1. 安装方法登录PyTorch
- 缓存的介绍在 * 站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面当一个网
- 英国著名学者李约瑟早在100多年前就疑惑：为什么中国的科技在唐宋时代就已领先西方，却在明清时代落后下来。对此，人们一向认为这主要是儒家思想的
