准备写一个点击li元素，div就跟在li元素下随动的东西，可是加上transition过渡之后，高度取值会出错，再点击一下那个元素就计算正常了，这是为什么？难道要取动画结束后的dom高度吗？求大佬给解答一下，如果有文档什么的贴一下就更好了，小弟在此谢过了
写了一个demo复现，去掉transition就是我想要的功能，但是加上transition就不行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li {
background-color: pink;
margin-top: 10px;
height: 100px;
width: 100px;
transition: all .5s;
}
.box{
height: 50px;
width: 100px;
background-color: red;
position: fixed;
top: 0;
}
</style>
<body>
<div style="position: relative;">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box"></div>
</div>
</body>
<script>
var list = document.querySelector('.list');
var liList = list.querySelectorAll('li');
var box = document.querySelector('.box')
function clear () {
liList.forEach((event) => {
event.style.paddingBottom = '0px';
})
}
liList.forEach((event) => {
event.onclick = () => {
clear()
let style = window.getComputedStyle(event, null);
event.style.paddingBottom = '50px';
box.style.top = Number(event.offsetTop) + Number(style.height.slice(0, style.height.length - 2)) + 'px'
}
})
</script>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
