ユーザーが1つのオプションをクリックすると、サブオプションがアニメーションで展開され、メインオプションが再度クリックされると、サブオプションもアニメーションで折りたたまれるように、ドリルダウンメニューをアニメーション化しようとしています。ドリルダウン メニュー自体は機能しますが、アニメーションで問題が発生します。
現在、「展開」アニメーションが正しく機能しています。サブオプション要素が作成されると、クラス「drill-expand」が与えられ、次の CSS にリンクされます。
.drill-expand {
animation:expand 1s;
-webkit-animation:expand 1s; /* Safari and Chrome */
}
および対応する @keyframes アニメーション。メイン オプションが最初にクリックされると、サブ オプションが作成され、ドリル展開アニメーションに従って表示されます。
しかし、サブオプションを折りたたむ際に問題が発生します。メイン オプションをクリックしてサブオプションを折りたたむと、サブオプションがアニメーションに従って表示されません。代わりに、DOM 要素が破棄されるだけです (ドリルダウン メニューの動作は正しいですが、きれいではありません - アニメーションが必要です)。DOM 要素が破棄される直前に「折りたたみ」アニメーションをトリガーする方法はありますか?
役立つ場合は、AngularJS 1.1.4 を使用しています。
ありがとう！