2

いくつかのアニメーション作業を行おうとしていますが、何らかの理由で ng-show / ng-hide 遷移中に適切なクラスが追加されません。添付されていないことを示すこのアニメーションを添付しました。私は何を間違っていますか？

ここに画像の説明を入力

に添付されているものなど、他のアニメーションが機能していることに言及する必要がありui-viewます。

CodePen デモ: http://codepen.io/anon/pen/OyoyYX?editors=101

クロムを使用している場合は、デバッガー ブラウザーを調べます。enter/etc クラスがアタッチされていないことがわかります。

アップデート：

GitHub のこのケースは関連しているようです: https://github.com/angular/angular.js/issues/12267

4

1 に答える 1

1

これはデフォルトの角度表示/非表示の動作です。ng-hideクラスはdisplay :noneを使用して要素を非表示にします。ただし、display:none はアニメーション化できません。この機能を display:block と opacity:0 でオーバーライドするだけで、アニメーションを実行できます。私が変更したあなたの例を見てください：

.ng-fluid{
    transition:1s linear all;
    opacity:1;
}
.ng-fluid.ng-hide{
  opacity:0;
  display:block;
}
.ng-hide-add, .ng-hide-remove{
  position: absolute;
}

http://codepen.io/anon/pen/LpJGwR?editors=101

于 2015-11-04T18:15:40.100 に答える