Как заставить работать transition?

Question

[freeman0204]

Код. Нужно что бы при наведении на ссылку блок всплывал плавно. Уже многое перепробовал не выходит. Как такое реализовать?

Answer 1

[Николай]

.hover {
  display: block;
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  cursor: pointer;
  text-align: center;
  color: #fff;
  top: 100%;
  padding-top: 60px;

}
a:hover .hover {
  opacity: 1;
   top: 0;
}

Например так.

Answer 2

[trushka]

Там всё неправильно.
Во-первых transition надо указывать для анимируемого элемента, а не для контейнера - оно не наследуется! То есть, для .hover
Во-вторых, transition так не указывается - для каждого свойства надо указывать отдельно, то есть transition: opacity .2s linear, transform .3s easy-in-out, например. В данном случае, лучше укороченную запись для all применить: transition: .2s easy-out
В-третьих, для плавной работы transition нельзя для "свёрнутого состояния" указывать display: none - можно, разве что visibility: hidden для старых ослов указать, по спецификации видимость включается сразу, а выключается в конце трансформации, да и блок как бы отображён, только не показывается, по этому на его прорисовку тратится намного меньше времени. И все размеры, отступы и цвета должны быть заданы заранее - при ховере он только должен выдвигаться и "проявляться" из прозрачного состояния. Ну, и двигать лучше с помощью transform - так плавнее намного
Вот так примерно: codepen.io/anon/pen/QyGqqz

Comments

[freeman0204]

Хороший ответ, спасибо. Вот только мне нужно без transform: translateY(-100%) а просто что бы сразу появлялся. И если убрать transform: translateY(-100%) то такое ощущение что ссылка "Думаем" налазит на красный блок. Они как то вместе пересекаются. Это можно как то исправить?