VUE的transition-group的絕對定位動畫問題

用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>```