• 分享

解决transition-group在flex/grid布局下动画移到左上角的问题

管理 avatar
管理 240阅读 0评论 0喜欢
今天再写一个列表删除动画功能,想实现元素删除之后,后面的元素平移过渡到当前位置 ```html <transition-group name="product-list" tag="section" class="product-list" @before-leave="beforeLeave" > <product v-for="watch in watches" :key="watch.id" :item="watch" > </product> </transition-group> <style> .product-list-enter-active, .product-list-leave-active { transition: all 0.3s; } .product-list-enter, .product-list-leave-to { opacity: 0; transform:translateY(20px); } .product-list-leave-active { position: absolute; } </style> ``` 上面的动画在display:inline-block布局下删除后元素下移20px动画正常,但是在grid布局下当前元素会移动到整个布局的左上角 这是因为实现平滑过渡需要用到 `position: absolute`, 导致定位偏移。 所以我们要用到 `@before-leave`方法,设定当前元素定位的位置 ```html <transition-group @before-leave="beforeLeave"> ... </transition> ``` ```js //设定当前元素定位的位置 methods: { beforeLeave(el) { const {marginLeft, marginTop, width, height} = window.getComputedStyle(el) el.style.left = `${el.offsetLeft - parseFloat(marginLeft, 10)}px` el.style.top = `${el.offsetTop - parseFloat(marginTop, 10)}px` el.style.width = width el.style.height = height } } ``` 这样就完美解决了,当然如果还有更好的解决方式可以在下面留言
avatar avatar

赶快写下您的第一条评论吧