Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

加上transition,dom高度取值问题

准备写一个点击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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

比如你点击了第三个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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...