Как оживить до неизвестной высоты в угловом?

Question

У меня есть код, который выглядит следующим образом:

<div ng-repeat="row in rows" class="my"> 
    <img ng-src="{{row.pictureUrl}}"> 
    {{row.text}} 
</div> 

Текущая реализация выглядит следующим образом (это CSS в формате Stylus), должен выглядеть слайд вниз эффект:

$slowAnimationDuration = 100ms 
.my 
&.ng-animate 
    transition:all 
    animation-iteration-count 1 
    animation-duration $slowAnimationDuration 
&.ng-enter 
    animation-name fadeInQuick 
    animation-timing-function ease-out 
&.ng-leave 
    animation-name fadeOutQuick 
    animation-timing-function ease-in 

@keyframes fadeInQuick 
    0% 
    height 0 
    opacity 0 
    20% 
    height calc(0.5em + 1vh + 1px) 
    50% 
    opacity 0.05 
    100% 
    height calc(1em + 2vh + 2px) 
    opacity 1 

@keyframes fadeOutQuick 
    0% 
    height calc(1em + 2vh + 2px) 
    opacity 1 
    100% 
    height 0 
    opacity 0 

Это код работает, но качество анимации пока настолько хорошее. Проблема связана с отсутствием анимации до height: auto в CSS. Я использую AngularJS 1.5 и у вас есть ngAnimate. Я могу исправить высоту изображения, но я не могу изменить или отрезать текст.

Как сделать анимацию строк лучше? Возможно ли это?

Обновление: попробовал это answer, выглядит действительно уродливо, на некоторое время страница остается пустой и после содержимого появляется. Кроме того, этот эффект сжатия не выглядит привлекательным.

Answer 1

Если вы знаете, что высота элемента должна быть, вы можете анимировать или перевести max-height.

div { 
 
    max-height: 50px; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    animation: height .5s forwards; 
 
    animation-delay: 1s; 
 
} 
 

 
@keyframes height { 
 
    to { 
 
    max-height: 200px; 
 
    } 
 
}

<div> 
 
    <p>asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asd fasd fasdf asdf asdf asdf asdf</p> 
 
</div>

Answer 2

Я считаю, что большинство 'разборные' элементы, которые оживляют открыть/закрыть, постигнет та же проблема.

Способ, которым они обходятся, заключается в добавлении двух дополнительных состояний, которые применяются для длины анимации. то есть. .my станет .my.animatingIn за 100ms, а затем изменится на .my.animatedIn. Класс animatingIn анимирует до фиксированной высоты .. скажем, 100px .. тогда класс animatedIn устанавливает его в auto. Это дает иллюзию расширения коробки, когда на самом деле ее анимация немного ... затем хватается.

К счастью, угловой имеет такой тип настройки для ng-animate из коробки. Используя имя анимации, а затем версию -active.

Например, если у вас есть анимация с именем одушевленным, во время ngRepeat ввести фазу, Угловая присоединит класс «анимировать войти» и их класс «живой ввод-активный». Docs

В результате вы должны увидеть это работает, используя что-то вроде

$slowAnimationDuration = 100ms 
.my 
&.ng-animate 
    transition:all 
    animation-iteration-count 1 
    animation-duration $slowAnimationDuration 
&.ng-enter 
    animation-name fadeInQuick 
    animation-timing-function ease-out 
&.ng-enter-active 
    height auto 
&.ng-leave 
    animation-name fadeOutQuick 
    animation-timing-function ease-in 
&.ng-leave-active 
    height 0 

@keyframes fadeInQuick 
    0% 
    height 0 
    opacity 0 
    20% 
    height calc(0.5em + 1vh + 1px) 
    50% 
    opacity 0.05 
    100% 
    height calc(1em + 2vh + 2px) 
    opacity 1 

@keyframes fadeOutQuick 
    0% 
    height calc(1em + 2vh + 2px) 
    opacity 1 
    100% 
    height 0 
    opacity 0 

Вы также можете воспользоваться указав путь, который вы хотите одушевленный вести себя, обновив HTML, чтобы включить ng-animate недвижимости

<div ng-repeat="row in rows" class="my" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"> 
    <img ng-src="{{row.pictureUrl}}"> 
    {{row.text}} 
</div> 

Это событие позволит вам изменить текущие имена классов, чтобы что-то вроде animate-quick-enter так что вы по-прежнему сохраняют доступ к д efaults