css3 过渡 - 在过渡结束后设置属性答案

【问题标题】：css3 transition - setting a property after transition has endedcss3 过渡 - 在过渡结束后设置属性
【发布时间】：2014-07-10 20:39:01
【问题描述】：

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

有没有办法延迟溢出属性的设置？我尝试了类似transition: overflow 0s ease 0.5s; 的方法，但这显然不起作用。

最好的，

【问题讨论】：

你能发布你目前拥有的代码吗？
我创建了一个小提琴来显示“问题”：jsfiddle.net/LWZqu 由于溢出：隐藏属性，Item1 上的子菜单（悬停在它上面）确实被切断了。

标签： css css-transitions

【解决方案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

【讨论】：

谢谢，但是这样我也可以使用 jQuerys slideUp / slideDown 函数。我希望完全摆脱这种情况。另外，这些事件真的是跨浏览器兼容的吗？还是谢谢。