webkit中的CSS最大高度过渡双动画错误答案

【问题标题】：CSS max-height transition double animation bug in webkitwebkit中的CSS最大高度过渡双动画错误
【发布时间】：2015-03-04 13:36:16
【问题描述】：

请参阅此 JSFiddle，例如：http://jsfiddle.net/6ocawwqd/21/

Stack Overflow 坚持我要包含我要链接的代码，所以这里是 JS 和 CSS：

$(document).on('click', '.show', function () {
    $('.reveal')[0].style.removeProperty('display');
    var height = $('.reveal')[0].scrollHeight;

    $('.reveal').css({ 'max-height': height, 'overflow':'hidden' });

    $('.reveal').removeClass('hide');

    setTimeout(function() {
        $('.reveal')[0].style.removeProperty('overflow');
        $('.reveal')[0].style.removeProperty('max-height');
    }, 501);
});

$(document).on('click', '.hide', function () {
    var height = $('.reveal')[0].scrollHeight;
    $('.reveal').css({'max-height': height, 'overflow':'hidden' });
    setTimeout(function() {
        $('.reveal').addClass('hide');
    }, 5);

    setTimeout(function() {
        $('.reveal').css('display', 'none');
    }, 505);
});

CSS

 a {
        color:blue;
        cursor:pointer;
    }
    .reveal {
        width:250px;
        background-color:#ccc;
        padding:10px;
        transition: all .5s;
        overflow:hidden;
        translate3d(0,.01%,0);
    }
    .reveal.hide {
        max-height:0 !important;
        padding-top:0;
        padding-bottom:0;
    }

基本问题：我有一个需要隐藏/显示的小部件，它的高度未知。隐藏时，显示必须设置为“无”以避免选项卡索引和表单验证问题。所以我使用 max-height 属性来利用 CSS 过渡来动画隐藏和显示，并将显示从“无”交换为“块”（或者通过从元素中删除显示属性来交换默认值。所描述的问题在任何一种情况下都会发生）。

在我的测试中，我仅在 OSX Safari、iOS 上的 Chrome 和 Safari 以及 Android Stock 移动浏览器中获得双重动画。（适用于 Windows Chrome、FF、IE11、Android Chrome）

我已经确定了双重动画何时发生。第一个动画是正确的，并且在通过 JavaScript 将 max-height 属性从 0 更改为内容高度时发生。

当我在动画完成后使用计时器删除 max-height 属性时，会出现第二个动画。我必须删除最大高度，因为在可见之后，元素可能会添加更多项目，因此必须允许增长。

有没有人遇到过或者有解决办法？

【问题讨论】：

现在有同样的问题。你找到解决方案了吗？

标签： ios webkit css-transitions

【解决方案1】：

我遇到过类似的问题，但发现很多 backface-visibility: hidden 建议都没有解决 iOS 的问题。

由于您已经在使用 JavaScript 设置/取消设置高度属性，您可以尝试在动画之前和动画完成之后为元素切换一个额外的“动画”类。如果您在移除高度（或将其设置回“自动”）之前执行此操作，iOS 将不会尝试重新设置导致闪烁的高度属性的动画。

以http://jsfiddle.net/m2adrugn/2/为例：

$(document).on('click', '.show', function () {
    $('.reveal')[0].style.removeProperty('display');
    var height = $('.reveal')[0].scrollHeight;

    $('.reveal').css({ 'max-height': height, 'overflow':'hidden' });

    $('.reveal').addClass('animating').removeClass('hide');

    setTimeout(function() {
        $('.reveal').removeClass('animating');
        $('.reveal')[0].style.removeProperty('overflow');
        $('.reveal')[0].style.removeProperty('max-height');
    }, 501);
});

$(document).on('click', '.hide', function () {
    var height = $('.reveal')[0].scrollHeight;
    $('.reveal').addClass('animating').css({'max-height': height, 'overflow':'hidden' });
    setTimeout(function() {
        $('.reveal').addClass('hide');
    }, 5);

    setTimeout(function() {
        $('.reveal').css('display', 'none').removeClass('animating');
    }, 505);
});

CSS

    a {
        color:blue;
        cursor:pointer;
    }
    .reveal {
        width:250px;
        background-color:#ccc;
        padding:10px;
        overflow:hidden;
        translate3d(0,.01%,0);
    }
    .reveal.animating {
        transition: all .5s;        
    }
    .reveal.hide {
        max-height:0 !important;
        padding-top:0;
        padding-bottom:0;
    }

【讨论】：

【解决方案2】：

将最大高度更改为高度。为我工作。

【讨论】：