Angularで未知の高さにアニメーション化する方法は？

Question

私はこのようなコード、持っている：

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

現在の実装では、この（それはスタイラス形式のCSSです）、効果ダウンスライドのように見えることになって次のようになります。

$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 

これをコードは機能しますが、これまでのところアニメーションの品質は非常に優れています。 問題は、CSSのheight: autoにアニメーションが存在しないことに関連しています。 私は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

私はオープン/クローズアニメーション最も '折りたたみ式' の要素は、同じ問題を被ると考えています。

アニメーションの長さに適用される2つの追加状態を追加します。すなわち、 .myは100msの場合.my.animatingInになり、.my.animatedInに変更されます。 animatingInクラスは固定された高さにアニメートします。例えば100pxとすると、animatedInクラスはautoに設定します。これは、実際にそのアニメーションを少し拡大したときのボックス拡大の錯覚を与えます。

角度はng-animateのためにこの種の設定をしています。アニメーションの名前を使用して、-activeのバージョンを使用します。

たとえば、ngRepeatの入力フェーズでanimateという名前のアニメーションがある場合、Angularは「animate-enter」クラスと「animate-enter-active」クラスを追加します。その結果、Docs

、あなたはまた、あなたはアニメーションがng-animateプロパティを含めるためにあなたのhtmlを更新することで動作するようにしたい方法を指定するから利益を得ることができる

$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 

のようなものを使用して、この作業が表示されます

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

このイベントはあなたがそうあなたはまだDへのアクセスを保持animate-quick-enterのようなものに、現在のクラス名を変更できますefaults