VUE的transition-group的绝对定位动画问题

Question

用transition-group做一个图片列表

我希望在删除图片元素的时候周围的元素可以平滑的运动过去，VUE官方文档说需要设置删除元素为绝对定位，但是如果删除每一行的第一个元素，由于设置了绝对定位这个元素会移动到上一行的行末,如下图

代码如下

<transition-group tag='div' name='imgs' style='position:relative'  class='upload-preview' v-if='imgs.length'>
            <div v-for='(item,index) in imgs'  :key='item.url' :style='{backgroundImage:`url(${item.url})`}' class='img-preview' @mouseenter='imgSettingsShow=item.url' @mouseleave='imgSettingsShow=""'>
                <div class='img-settings' v-show='imgSettingsShow===item.url'>
                    <i class='fa fa-search-plus' @click='magnifyURL=item.url'></i>
                    <i class='fa fa-trash-o' @click='deleteImg(index)'></i>
                </div>
                <div class='select-wrapper'>
                    <div class='img-select' @click='updateImgChecked(item)' :style='{background:item.checked?"#409eff":"#fff"}'><span>✓</span></div>
                </div>
            </div>
        </transition-group>```

Answer 1

同问，我也想问这个，楼主解决了吗

Answer 2

只需要为离开的状态动画设置绝对定位即可