Question

例如，请参阅此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过渡来为隐藏和显示设置动画，并交换显示来自“无”。阻止＆＃39;阻止＆＃39; （或者只是通过从元素中删除display属性来实现默认值。在任何一种情况下都会出现问题）。

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

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

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

是否有人遇到此问题或有解决方案？

Answer 1

我遇到了类似的问题，但发现许多 backface-visibility：hidden 建议尚未解决它。

由于您已经使用JavaScript来设置/取消设置高度属性，因此您可以尝试切换其他动画＆＃39;动画之前和动画完成之后的元素类。如果您在移除高度之前执行此操作（或将其重新设置为＆＃39; auto＆＃39;），则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;
    }

Answer 2

将max-height更改为height。为我工作。

webkit中的CSS max-height过渡双动画错误

2 个答案: