使用transition过渡动画时, 遇到不能及时获取到dom元素宽高的坑

最近在做需求的时候, 踩到了这么一个坑:

目标: 图片旋转后, 重新获取图片的高度。

过程: 旋转过程中使用了过渡动画。

----------------结构↓----------------------------------------------------------------------
<ul>
    <li class="img-container">
        <img
        	class="cover"
        	src="......"
        	alt="cover"
        	style="transition: all .2s linear;"
        	@load="load"/>
    </li>
</ul>
// ↑↑ @load="load" 注册了一个图片加载完毕后触发的事件

--------------------------------------------------------------------------------------------

load(){
	console.log('offsetHeight', document.querySelector('li').offsetHeight);
}
// 在图片加载完毕后 获取该图片父元素'li'的整个高度

可以发现 一开始 获取到的高度是正常的:

然后我旋转图片(旋转90度-水平, 再旋转90度回来-恢复垂直), 并且给了一个transition过渡动画
(具体是如何实现旋转的, 不在本文讨论范围之内, 我会在后面的文章中分享给大家~)

// 图片旋转事件:
rotate() {
	...旋转相关代码
	console.log('offsetHeight', document.querySelector('li').offsetHeight);
}

上述代码相当于是在旋转后, 立马获取 “li元素” 的高度。此时, 神奇的坑出现了:

什么鬼?? 为什么变少了, 但是从dom结构上看 高度并没有改变啊!
一开始我以为少掉的部分是上下padding(20+30), 感觉算下来差不多是少了padding的距离, 那为啥转回来之后offsetHeight中不会再包含padding了呢?
但是当我在浏览器中打印"li元素"的时候, 发现offsetHeight的高度其实并没有少…

这特么逗我??
于是 我开始怀疑是动画的问题, 做了两个实验:

1. 加个定时器, 等个2秒再来打印

rotate() {
	...旋转相关代码
	setTimeout(() => {
		console.log('offsetHeight', document.querySelector('li').offsetHeight);
	}, 2000)
}

2. 把transition过度删掉

你别说, 还真是…打印出了 “offsetHeight 538”

结论: 使用transition过渡时, 由于过渡时间的影响, 如果此时立刻获取该dom元素的高度, 会出现数值不准确的问题

解决方法: transitionend 方法

给图片注册transitionend事件

<img
	class="cover"
	src="......"
	alt="cover"
	style="transition: all .2s linear;"
	@load="load"/>
	@transitionend="transitionEnd" //注册此事件
/>
transitionEnd() {
	// 在这里面获取动画过渡后的数据:
	console.log('offsetHeight', document.querySelector('li').offsetHeight);
}

此时就恢复了正常。