问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

加上transition，dom高度取值问题

头像
糖醋里脊
    35
    新手上路，请多包涵

    准备写一个点击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>
    htmlhtml5css前端javascript
    阅读 1.2k
    1 个回答
    得票最新
    头像
    hfhan
      28.9k72241
      ✓ 已被采纳

      过渡是有时间的，这包括他变回原来的样式。

      比如你点击了第三个li，此时他的paddingbottom变成了50px，当你点击第四个li的时候，第三个li因为过渡效果并没有立即变成原来大小，所以你下面获取的offsetTop就有问题了，这个高度需要减去你的paddingbottom值，也就是50px。点击第三个li上面的li是没问题的，比如第二个。

      <!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;
        transition: top .5s;
    }
</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 (){
        let activeindex, padding = 50;
        liList = Array.prototype.slice.apply(liList)
        function clear () {
            if(!isNaN(activeindex)){
                let active = liList[activeindex]
                active.style.paddingBottom = '0px';
            }
        }
        
        liList.forEach((item, index) => {
            item.onclick = () => {
                clear()
                let p = index > activeindex ? padding : 0
                activeindex = index
                let style = window.getComputedStyle(item, null);
                item.style.paddingBottom = padding + 'px';
                box.style.top = Number(item.offsetTop) + parseFloat(style.height) - p + 'px'
            }
        })
    }()
</script>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏