Переключение высоты меню ведет себя по-разному при закрытии, чем при открытии [дубликат]

Надеюсь, вы уже работали над этим, но я просто пишу, чтобы сказать, что столкнулся с одной и той же проблемой: WebKit, по крайней мере, на iOS 4.1, не будет анимировать переход, если он был определен в элементе, display: none; », точно так же, как упомянутый выше Николас.

Если ваша проблема в том, чтобы не показывать этот элемент, это, как и в моем случае, то я предлагаю другое решение, чем установить высоту в 0. В вашем теле обратный вызов события onLoad, сохраните элемент в переменной и удалите его из DOM. Затем повторно вставьте его, когда наступит время, чтобы показать его.

Я использовал следующее решение для элементов, где мне нужно переключаться между дисплеем none и block и сохранять эффект перехода:

function slidedown(element) {
    ...
    element.style.display = "block";
    var timerId = setTimeout(function(){
        element.style.webkitTransitionProperty = "height";
        element.style.webkitTransitionTiming = "linear";
        element.style.webkitTransitionDuration = "3.5s";
        element.style.height = "500px";
    }, 0);
    ...
}

функция setTimeout будет заставьте короткую задержку, чтобы переход произошел после переключения свойства отображения. Надеюсь, что это поможет.

Решение (чисто CSS) до сих пор

Если вы оставите height:auto; и используете фиксированные значения max-height, вы можете имитировать переход:

.details-expanded {
    max-height: 300px; /* try to guess a max-height for your content */
}

.details-collapsed {
    height: auto;
    max-height: 0;
    transition: max-height 500ms linear; /* pick a proportional duration */
}

Обратите внимание до длительности перехода и max-height, когда элемент расширяется. Играйте со значениями, пока не получите желаемое поведение.

Таким образом вы можете получить переход между двумя определенными значениями (в приведенном выше примере от 0 до 300), в то время как свойство height будет просто «следовать» «max-height переход и расти до тех пор, пока он не получит размер содержимого.

Демос

DEMO 1 - рабочий пример этого решения

DEMO 2 - просто демонстрация того, что происходит в DEMO 1

Наблюдения

В настоящее время переходы реализуются только между предопределенными значениями, и я предположил, что это связано с тем, что в некоторых случаях двигатель не может угадать начальное или конечное значение. Что делать, если у вас есть переход на высоту, конечное значение которого составляет 50%, но сам переход влияет на высоту родителя? Вероятно, для каждого кадра потребуется несколько расчетов reflow , вызывающих проблемы с производительностью.

Как и в случае с fabb , спецификация для переходов CSS определяет, что процентные значения должны поддерживаться, поэтому это может быть просто вопрос времени, пока двигатели не решат, в каких случаях они идут для поддержки переходов с использованием динамически оцениваемых точек. Тем не менее, я не уверен, что можно считать правильным поведением для значений auto.