vue的transition-group 下面每个元素分别执行动画

Posted 2020-10-31 破晓儿

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>