用transition-group做一個(gè)圖片列表

我希望在刪除圖片元素的時(shí)候周圍的元素可以平滑的運(yùn)動(dòng)過(guò)去，VUE官方文檔說(shuō)需要設(shè)置刪除元素為絕對(duì)定位，但是如果刪除每一行的第一個(gè)元素，由于設(shè)置了絕對(duì)定位這個(gè)元素會(huì)移動(dòng)到上一行的行末,如下圖

代碼如下

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