3

Почему пропадет transition при указании % соотношения?

код

.buttom:hover ~ .container{
    /*height:500px;*/
    height: 100%;
}

Если указать height: 500px работает плавный переход, если указать height: 100% раскрытие проходит мгновенно.

Подскажите почему и как правильно изменить код.

1
  • Вкратце говоря, так оно работать не будет. Вот здесь можно посмотреть разные предложенные решения stackoverflow.com/questions/3508605/…. Либо реализовать с использованием js/jQuery.
    – Heidel
    23 сен 2015 в 18:16

3 ответа 3

3

В твоём коде 100% на самом деле означают auto, поскольку у контейнера не задана высота.

Если её задать, то плавное разворачивание будет.

html, body {
    height: 100%;
}

http://jsfiddle.net/m8oc7knn/1/

2
  • Спасибо за ответ. Т.е. у контейнера должен быть абсолютный размер , что бы работал транзишон к относительному? Где про это можно почитать? 23 сен 2015 в 19:13
  • @Виталий, не абсолютный, а просто заданный. Проценты не могут считаться от auto.
    – Qwertiy
    23 сен 2015 в 19:41
2

Понял, как сделать, чтобы transition заработал без указания высоты.

Пусть высота всегда будет auto, а изменяется максимальная высота:

.container{
    max-height: 50px;
}

.buttom:hover ~ .container{
    max-height: 1000px;
}

http://jsfiddle.net/m8oc7knn/2/

Хотя это не совсем так работает, как надо. Анимируется весь диапазон max-height, а не высота.

1

Свойство height относится к свойствам, которые лучше не анимировать, потому что анимировать желательно всего два свойства — opacity и transform.

При анимации height браузер начинает перерасчитывать макет, а значит на каждом фрейме анимации будет вызвана перерисовка. Чтобы этого избежать, в нашем случае, будем анимировать transform.

Для начала, необходимо вынести объект, который будем анимировать, в отдельный композиционный слой — это делается при помощи will-change: transform или по-старинке transform: translateZ(0). А после этого уже можно воспользоваться трюком с transform: scaleY(0) / scaleY(1).

Самостоятельно разницу можно пощупать в Developer Tools → Console → esc → Rendering → Paint Flashing.

введите сюда описание изображения

div {
  position: relative;
  display: inline-block;
}

menu {
  position: absolute;
  top: 100%;
  will-change: transform;
  transition: transform .3s;
  transform: scaleY(0);
  transform-origin: 50% 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px 0;
  margin: 0;
}

menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

menu a {
  display: block;
  padding: 5px 15px;
  text-decoration: none;
  color: #000;
}

menu a:hover {
  background: #000;
  color: #fff;
}

span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  display: inline-block;
  cursor: default;
}

div:hover > menu {
  transform: scaleY(1);
}
<div>
  <span>hover me</span>
  <menu>
    <ul>
      <li><a href="#">Main</a>
      <li><a href="#">Stories</a>
      <li><a href="#">Blog</a>
      <li><a href="#">Something</a>
    </ul>
  </menu>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, ratione error, hic alias officiis voluptatibus ipsa natus ab maxime accusamus rerum sunt aliquid. Ratione vero blanditiis assumenda, nisi non. A.</p>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.