angularjs - 親でngClassが変更されたときに子要素をアニメーション化する方法

Question

子要素の遷移を定義し、親要素の ngClass が変更されたときに ngAnimate にそれらを考慮させることは可能ですか?

これまでのところ、私はこれを行うことができませんでした。
http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview

ありがとう。

Answer 1

あなたがやろうとしている方法では不可能だと思います。Angular は、タイミングを決定するために基本クラスのアニメーション/トランジション プロパティを探しています。しかし、あなたの場合、これらすべてのプロパティは子要素で定義されています。その結果、Angular は必要なアニメーション フックを接続できません。

できることは、アニメーション ステップを実行する必要があるときに Angular にヒントを提供することです。このような：

.container {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

これは、トランジションに関して必要なすべてを Angular に伝えるトランジション スタイルの複製です。

デモプランク。

transition-duration: 1s提供することはここでは重要な部分にすぎないように見えるので、次のようになります。

.container {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}