Почему не работает transition у высоты, заданной в процентах?

#html #css #css3 #анимация #transition

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

код

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


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

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

Ответы

Ответ 1

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

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

html, body {
    height: 100%;
}


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


Ответ 2

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

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

.container{
    max-height: 50px;
}

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


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

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


Ответ 3

Свойство 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);
}

  hover me
  
    

      
Main
      
Stories
      
Blog
      
Something
    
  


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.