vue中渐进过渡效果实现

vue中渐进过渡效果实现

本文实例为大家分享了vue 渐进过渡效果，供大家参考，具体内容如下，供大家参考，具体内容如下

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger：

或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好的控制：

Vue.transition('stagger', {

stagger: function (index) {

// 每个过渡项目增加 50ms 延时

// 但是最大延时限制为 300ms

return Math.min(300, index * 50)

}

})

示例：html代码：

transition="staggered"

stagger="100">

{{item.msg}}

js代码：

new Vue({

el: '#demo',

data: {

query: 'oAMHmvdgGY',

list: [

{ msg: 'Bruce Lee' },

{ msg: 'Jackie Chan' },

{ msg: 'Chuck Norris' },

{ msg: 'Jet Li' },

{ msg: 'Kung Fury' }

]

}

})

css代码：

ul {

padding-left: 0;

font-fahttp://mily: Helvetica, Arial, sans-serif;

}

.staggered-transition {

transition: all .5s ease;

overflow: hidden;

margin: 0;

height: 20px;

}

.staggered-enter, .staggered-leave {

opacity: 0;

height: 0;

}

效果如下图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。