javascript - 如何通过vue（animate.css）为数组的第一个元素而不是最后一个元素设置动画

Question

我有一个按时间更新的数组，但animate.css总是在数组更改时为数组的最后一个元素设置动画。

<template>

<div class="">


    <div v-for="(device,index) in value" :key="index">
      <div v-if="device.hasOwnProperty('timeIn')" class="row" >
        <transition  :duration = "700" type="animation" enter-active-class="bounceInLeft" leave-active-class="bounceInRight" appear mode="out-in" key="1">
            <app-user-detected  :userDetected="device" ></app-user-detected key="1">
        </transition>

       </div>
        <div v-if="device.hasOwnProperty('timeOut')" class="out row" :key="3">
        <transition :duration = "400" type="animation" enter-active-class="fadeIn" leave-active-class="fadeOut" appear mode="out-in">
            <app-user-detail :userDetail="device"></app-user-detail>
        </transition>
        </div>


   </div>

</div>
</template>