3

実際の高さがわからない要素をアニメーション化したいので、trickwithを使用していmax-heightます。

CSS は非常に単純です。

.animate-enter-setup, .animate-leave-setup {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  overflow: hidden;
}

.animate-enter-setup {
  opacity:0;
  max-height: 0;
}
.animate-enter-setup.animate-enter-start {
  max-height: 200px;
  opacity:1;
}

.animate-leave-setup{
  opacity:1;
  max-height: 200px;
}
.animate-leave-setup.animate-leave-start {
  opacity:0;
  max-height: 0;
}

ここの例: http://plunker.co/edit/AoirGQoOKsflunxj9RGV?p=previewアニメーション getはleave、アイテムが前のアニメーションを終了しなかった場合にのみ適用されenterます。アイテムのアニメーションが終了してもenter、leaveアニメーションは適用されません (クラスとしては適用されますが、視覚効果はありません)。

angularではなく、CSSに問題があると思われます。しかし、私はそれが何であるか分かりません。

4

1 に答える 1

1

トリックを使用する場合は、max-heightアニメーション化する要素が定義されている必要がmax-heightあり、overflow:hidden(アニメーション クラスだけでなく)

ここで奇妙なのは、setupアニメーション クラスが要素上にあってもブラウザによって適用されないことです。

更新された例: http://plunker.co/edit/qnEFDhAyGqhsJdCGrF71?p=preview

これは、角度またはクロムのバグである可能性があると思います。

于 2013-05-11T17:48:17.907 に答える