vue中渐进过渡效果实现
更新时间：2016年10月27日 09:25:44 作者：笨笨猪1995
这篇文章主要为大家详细介绍了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;
}
效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
函数式组件就是没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数,下面这篇文章主要给大家介绍了关于Vue3封装全局函数式组件方法的相关资料,需要的朋友可以参考下2023-06-06
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下2022-11-11
本文主要介绍了element step组件在另一侧加时间轴显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
解决vue使用vant轮播组件swipe + flex时文字抖动问题
这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-01-01
这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Pycharm中开发vue element项目时eslint的安装和使用步骤
这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了使用vue的transition完成滑动过渡的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。这篇文章主要介绍了vue中通过使用$attrs实现组件之间的数据传递,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了vue3之声明式和编程式导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
在Vue-cli里应用Vuex的state和mutations方法
今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论