vue 中可以使用 <transition-group> 组件同时渲染整个列表, 对一组列表进行动画渲染, 而当使用动态数据进行动画渲染时, 我们可以使用钩子函数, 那么如果我们要对每个元素分别执行动画, 该怎么做呢?
此时我们可以在列表标签中使用 v-bind:data-XXX="动态值", 那么在钩子函数中就可以通过 el.dataset.XXX 拿到该值, 从而分别执行动画!
例如:
- <transition-group v-on:before-enter="beforeEnter" v-on:enter="enter">
- <span v-for="(item,index) in arr" v-bind:key="item" v-bind:data-index="item"> </span>
- </transition-group>
- <script>
- export default {
- methods:{
- beforeEnter: function (el) {
- },
- enter: function (el, done) {
- var index = el.dataset.index
- setTimeout(function () {
- Velocity(
- el,
- { 'background-position-y':-100*index+'%' },
- { duration: 5000 + index * -100,
- easing: "easeInOutCirc",
- complete: done }
- )
- }, index * -10)
- },
- }
- }
- </script>
来源: http://www.bubuko.com/infodetail-2568037.html