0

Добрый вечер!

.block {
  width: 100px;
  height: 300px;
  background-color: red;
  transition: 1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo {
  width: 100px;
  height: 1px;
  background-color: #000000;
  transition: 10s;
  display: none;
}

.block:hover .demo {
  cursor: pointer;
  transform: scaleY(100);
  display: block;
}
<div class="block">
  <div class="demo">
  </div>
</div>

При наведении на .block высота блока .demo увеличивается мгновенно до 100px. При этом в transition указано 10s. В чем моя ошибка? Спасибо!

2
  • у transition несколько параметров. 18 фев 2018 в 19:07
  • Александр, а какого эффекта ты добивался, объясни....
    – Air
    18 фев 2018 в 19:41

3 ответа 3

1

.block {
  width: 100px;
  height: 300px;
  background-color: red;
  transition: 1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo {
  width: 100px;
  height: 1px;
  background-color: #000000;
  transition: all 10s;
}

.block:hover .demo {
  cursor: pointer;
  transform: scaleY(100);
  display: block;
}
<div class="block">
  <div class="demo">
  </div>
</div>

0

Здесь можно подробно посмотреть Transitions on the display: property

с

display: none;    

анимация не будет работать. Замени

display: none;

на

opacity: 0;

и верно будет

transition: all 10s;
3
  • Попробовал. К сожалению, ничего не изменилось...
    – Aleksandr
    18 фев 2018 в 19:16
  • извени, не заметил всего сразу, с display анимация не работает
    – user283873
    18 фев 2018 в 19:18
  • Большое спасибо! Работает.
    – Aleksandr
    18 фев 2018 в 19:22
0

display: none не может быть анимировано на css, opacity: 0 - может.

Раскрытие блока - делаем элемент резко непрозрачным, плавно меняем выстоу. Закрытие блока - плавно меняем высоту, а для прозрачности ставим задержку и резко делаем блок прозрачным.

.block {
  width: 100px;
  height: 300px;
  background-color: red;
  transition: 1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo {
  width: 100px;
  height: 1px;
  background-color: #000000;
  transition: transform 1s ease 0s, opacity 0s ease 0.9s;
  opacity: 0;
}

.block:hover .demo {
  cursor: pointer;
  transform: scaleY(100);
  transition: transform 1s ease 0s;
  opacity: 1;
}

https://jsfiddle.net/o8ubcobj/7/

Ваш ответ

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

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