Задать вопрос
ItsEvilTime
@ItsEvilTime
Сайленсер не дает мне покоя

Почему не анимируется height:100%?

Структура HTML:
<input type="checkbox">
<section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam odio at reiciendis rem suscipit voluptatem eos maxime accusantium recusandae vero! Earum illum impedit nisi deleniti iusto amet voluptates quod facere dolor vero cumque possimus repellat. Incidunt eos ab reprehenderit voluptates totam suscipit ullam impedit perspiciatis mollitia harum dignissimos minus odit tempore quasi quia in eligendi aliquid quos hic voluptatibus magni!
</section>

CSS:
section {
    width: 200px;
    background: red;
    height: 0;
    transition: all .3s ease;
}
input:checked + section {
    height: 100%;
}

Пример на JsFiddle: jsfiddle.net/6kbx546L

Стоит transition, но анимирования нет. Но если заменить проценты на px - то анимация будет как положено.
Вопрос: Почему не анимируются проценты?

Если сделать обертку дивом и этому диву указать фиксированное значение (скажем 300px)- то анимация у section также будет нормальной. Но если я не знаю высоту section?
  • Вопрос задан
  • 318 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
Процентное значение всегда относительно чего либо. Попробуйте через JS получать высоту section и присваивать значение этому же элементу section. Возможно есть более лучшее решение.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы