CSS макс высоты переход двойная ошибка анимации в WebKit

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; 
    } 

Основная проблема: у меня есть виджет, который мне нужно, чтобы скрыть/показать, который имеет неизвестную высоту. При скрытии дисплей должен быть установлен на «none», чтобы избежать проблем с индексами табуляции и проверки формы. Поэтому я использую свойство max-height, чтобы использовать переходы CSS для анимации скрытия и отображения, а также для переключения отображения из «none» в «block» (или просто по умолчанию, удалив свойство отображения из этого элемента). Описанная проблема происходит в любом случае).

В моем тестировании я получаю двойную анимацию только в OSX Safari, Chrome и Safari на iOS и мобильном браузере Android Stock. (Он работает в Windows Chrome, FF, IE11, Android Chrome)

Я определил, когда происходит двойная анимация. Первая анимация правильная и происходит, когда свойство max-height изменяется с помощью JavaScript от 0 до любой высоты содержимого.

Вторая анимация возникает, когда я использую таймер для удаления свойства max-height после завершения анимации. Я должен удалить максимальную высоту, потому что после видимости элемент может получить еще больше предметов, добавленных к нему, и поэтому должно быть позволено расти.

Кто-нибудь сталкивался с этим или имел решение?

Answer 1

Я столкнулся с аналогичной проблемой, но обнаружил, что много обратная сторона-видимость: скрытые предложения не разрешили ее для iOS.

Поскольку вы уже используете JavaScript для установки/отмены свойств высоты, вы можете попробовать переключить дополнительный «анимирующий» класс на элемент перед анимацией и после завершения анимации. Если вы сделаете это до удаления высоты (или установите ее на «авто»), iOS не будет пытаться повторно охарактеризовать свойство height, которое приводит к мерцанию.

Берем пример 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

Изменение макс высоты к высоте. Работал для меня.