nvue页面中animation.transition对于v-for生成的组件无效

<view class="row" >
<view class="box1" ref="love1" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love2" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love3" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love4" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love5" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love6" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love7" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love8" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love9" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
<view class="box1" ref="love10" @click="move">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>

            <!--  v-for生成的组件 animation.transition无效  
            <view  v-for="(item, index) in lovesData"  class="box1"   :ref="`loveaa${item.id}`"  @click="move">  
                <image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>  
            </view>  
            -->  

        </view>    

      data(){  
          return{  
              "isActive":false,  
              nIndex:0,  
              lovesData:[{id:'1'},{id:'2'},{id:'3'},{id:'4'},{id:'5'},{id:'6'},{id:'7'},{id:'8'},{id:'9'},{id:'10'}]  
          }  
      },  

move() {
const that=this;
that.nIndex++;
if(that.nIndex>10) that.nIndex=1;
const loveEl = this.$refs['love'+that.nIndex];
//const loveEl = this.$refs['loveaa'+that.nIndex]; //能获取到v-for生成的组件 但没动画
console.log(that.nIndex,loveEl);
let xx=50-Math.random() * 100;
animation.transition(loveEl, {
styles: {
opacity:'0',
transform: translate(${xx}px, -280px), scale(1,1) rotate(90deg),
transformOrigin: 'center center'
},
duration: 2000, //ms
timingFunction: 'ease-in-out',
delay: 0 //ms
},()=>{
let mystyles= {
styles: {
width:'80rpx',
height:'80rpx',
opacity:'1.0',
},
duration: 10, //ms
delay: 0 //ms
}
that.moveBack(loveEl,mystyles);
})
},
moveBack(ele,myStyles){
animation.transition(ele,myStyles,()=>{});
}