Vue.js每天必学之过渡与动画

2020-06-16 06:34:06易采站长站整理

$(el).stop()
}
})

然后用 transition 特性中:

<p transition=”fade”></p>

渐近过渡

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)
}
})

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。