【transitionEnd】解决如何在transition的时间结束后执行javascript

最新推荐文章于 2025-03-28 10:30:00 发布

勒布朗赵四

最新推荐文章于 2025-03-28 10:30:00 发布

阅读量4.1k

点赞数 1

分类专栏： JavaScript/jQuery HTML5CSS3

本文链接：https://blog.csdn.net/dlshbn/article/details/52985529

版权

JavaScript/jQuery 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML5CSS3

5 篇文章

订阅专栏

本文探讨了使用CSS transition实现元素高度变化的过渡效果，并解决了在高度变化过程中同步更新滚动条位置的问题。通过采用transitionEnd事件替代setTimeout方法，实现了更优雅且兼容性良好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我自己遇到的问题

通过CSS 的 transition效果给容器的高度加过渡动画

eg：

...
<div class="DPCoachItem">
...
</div>
...

.DPCoachItem{
    height: 100px;
    transition: height 300ms ease;
    -moz-transition: height 300ms ease;  
    -webkit-transition: height 300ms ease;
}
当容器DPCoachItem的高度发生变化的时候，执行transition过渡，但是问题来了，下面代码
var box = document.querySelectorAll(".DPCoachItem")[0];

function showBoxContent() {
    box.setAttribute('style', 'height:300px');
    ...
    this.resizeScroll();//滚动条resize
}

function hideBoxContent() {
    box.setAttribute('style', 'height:100px');    
    ...
    this.resizeScroll();//滚动条resize
}

不难发现，当执行 showBoxContent 或者 hideBoxContent时，resizeScroll()方法是在 transition 过渡结果前就已经执行完了，所以无论怎么show/hide 滚动条是不会动的之前我的解决办法是加 setTimeout方案一：

function showBoxContent() {
    box.setAttribute('style', 'height:300px');
    ...
    setTimeout(function() {
        this.resizeScroll();//滚动条resize
    }, 300);
}

function hideBoxContent() {
    box.setAttribute('style', 'height:100px');
    ...
    setTimeout(function() {
        this.resizeScroll();//滚动条resize
    }, 300);
}

ok,是解决了，但是总是感觉太多 timeout不好，于是。。。

方案二：

<span style="font-family:Menlo,monospace;">box.addEventListener('webkitTransitionEnd', function() {</span>
    this.resizeScroll();//滚动条resize
}.bind(this));