Угловая анимация с высотой: авто; не работает

Question

Угловая анимация с высотой: авто; не работает

0

Я хочу сделать анимацию, используя угловую анимацию. Мои правила css:

.expanded {
    transition: all ease 0.5s;
    overflow: hidden;
}
.expanded.ng-hide {
    height: 0px;
}

Если добавить, например, height: 100px в .expanded класс, тогда все будет хорошо. Но как заставить его работать без определения height? Мне нужно это, потому что содержимое контейнера .expanded может отличаться.

splash27 24 март 2016, в 10:14

Источник

Теги:

javascript

angularjs

css

2 ответа

0

Сообщение kirill.buga помогло мне, поэтому после прочтения этого сообщения и некоторых других я внес некоторые изменения в сообщение kirill.buga. Я избавился от высоты контейнера, так как он должен был быть автоматически, замедлил переход, а затем спрятал переполнение, так что, когда div распался, содержимое внутри div больше не будет видно.

#container {
  max-height: 20px;
  background: red;
  overflow:hidden;
  transition: max-height 2s ease-in;
}

#container:hover {
  max-height: 800px;  
}

пример plunker

Fractal 16 июль 2017, в 20:50

Ещё вопросы

kirill.buga · Accepted Answer · 2016-03-24T07-23-00.000Z

Невозможно оживить высоту до "auto" в CSS (ни в angularJS). Вместо этого вы можете попробовать играть с максимальной высотой. Есть некоторые последствия этого, но по крайней мере вы можете попробовать. Таким образом, анимируйте не высоту от 0 до авто, а максимальную высоту. Вы можете установить максимальную высоту намного больше, чем нужно, и это будет работать.

#container {
  max-height: 0;
  height: 100px;
  background: red;
  transition: max-height .3s ease-in;
}

#container:hover {
  max-height: 500px;  
}

<div id="container">
  Hover me
</div>