Переход CSS не работает на процентную высоту?

Ответ 1

Решение (чисто 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 и расти, пока не получит размер содержимого.

Demos

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

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

Наблюдения

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

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

Ответ 2

В соответствии с W3C Spec в переходах CSS3 длина и процент должны быть разрешены для перехода на высоту свойства. Поэтому я думаю, что это всего лишь вопрос времени, пока в браузерах не будет поддерживаться процент.

Ответ 3

У меня была такая же проблема. Переход "отлично работал", когда "рушился", но появился без перехода (например, "включен" ) при "расширении", когда раньше был установлен "display: none".

Я случайно пришел к рабочему решению во время отладки: просто запрос "offsetHeight", похоже, заставляет внутреннюю повторную визуализацию элемента.

что-то вроде этого:

    showElement = function(){
       ...
       oEl.style.display = "block";
       var xDump = oEl.offsetHeight;
       oEl.className = "show";
    }

xDump никогда не используется, но имея его, сделал differnce.

Ответ 4

Я использовал следующее решение для элементов, где мне нужно переключаться между отображением 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 заставит короткую задержку разрешить переход после переключения свойства отображения. Надеюсь, что это поможет.

Ответ 5

Это изменение от отображения: none для отображения: блок, который останавливает переход. Попробуйте установить свернутый стиль для отображения: block; высота: 0; переполнение: скрытый;

Примечание: расширенная высота авто также остановит переход. Если на содержащем блоке нет высоты, высота 100% равна высоте авто.

Ответ 6

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

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

Ответ 7

Вот решение для тех, кто хочет использовать проценты.

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

вот код

.container {
    width: 500px; 
    height: 500px; 
    background: transparent;
}
.expand-content{
    height: 0%; 
    color: #fff;
    background: green;
}
.expand-content:hover {
    height: 100%; 
    background: orange;
    transition: all 2s ease;
}
.expand-content p  {
    font-size: 35px; 
    text-align: center;     
}

<div class="container">
    <div class="expand-content">
        <p>Expanded Content</p>
    </div>
</div>