Question

我知道如何使用css3过渡和特定高度属性和溢出设置为“隐藏”来上下滑动内容框。但在我的情况下，我需要这个框在向下滑动过渡结束时溢出（它包含一些比框大的绝对定位元素 - 特定于滑出菜单）。

有没有办法延迟溢出属性的设置？我试过像transition: overflow 0s ease 0.5s;这样的东西，但显然不起作用。

最好的，

d

Answer 1

您使用的语法绝对正确：transition:property | time | easing | delay, another property

不幸的是，溢出根本不可动画（See W3C）。所以不可能在它上面使用过渡。

我认为唯一的解决方案是使用JavaScript和transitionend-event：

<强>的JavaScript

["transitionend","webkitTransitionEnd","mozTransitionEnd"].forEach(function(transitionEnd) {
    document.querySelector("div").addEventListener(transitionEnd,function() {
        if(this.style.overflow == "visible") {
            this.style.overflow = "";
        } else {
            this.style.overflow = "visible";
        }
    });
});

<强>的jQuery

$("div").on("transitionend webkitTransitionEnd mozTransitionEnd",function() {
    $elem = $(this);
    if($elem.css("overflow") == "visible") {
       $elem.css("overflow","");
    } else {
       $elem.css("overflow","visible");
    }
});

<强> Demo

css3 transition - 在转换结束后设置属性

1 个答案: