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>

vue的transition-group 下面每個元素分別執行動畫