本文实例为大家分享了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代码：

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;

}

效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。