3

条件に基づいてレンダリングされているビューがあります:

{{#if boolean}}
  {view MyView}}
{{/if}}

要素が DOM に挿入されたときの素敵なアニメーションを簡単に追加できます。

MyView: {
  didInsertElement: function() {
    this.$().hide().show('slide', {direction: 'left', duration: 2000});
  }
}

ただし、要素が DOM から削除された場合、同じことはできません。

MyView: {
  willDestroyElement: function() {
    this.$().hide('slide', {direction: 'right', duration: 2000});
  }
}

このビューの制御を超える条件に基づいて要素が表示されているため、これは機能しません。要素はすぐに DOM から削除されます。非同期アニメーションは実行されません。

これを処理する最善の方法は何ですか?

4

3 に答える 3

1

単純なケースでは、代わりにブール値をビューにバインドして観察し、ビューを手動で隠したり表示したりしますが、それ以外の場合は DOM に残します。

于 2013-03-06T12:47:21.217 に答える
1

これはハッキーな解決策ですが、私にとってはうまくいきます：

willDestroyElement: ->
  element = @$().clone()
  @$().replaceWith element
  element.slideUp 250, ->
    element.remove()

基本的には、DOM 要素のクローンを作成し、Ember にビューに関連付けられた要素を破棄させ、クローンを使用してアニメーションを実行させます (アニメーションの完了後に必ずクローンを破棄してください)。

于 2013-03-30T11:14:47.913 に答える
0

あなたの見解でこのようなことをしてみませんか？

booleanChanged: function() {
  var boolean = this.get('controller.boolean');
  if (boolean) {
    this.$().hide().show('slide', {direction: 'left', duration: 2000});
  } else {
    this.$().hide('slide', {direction: 'right', duration: 2000});
  }
}.observes('controller.boolean')

ハンドルバーで使用するだけです

{view MyView}}
于 2013-03-07T08:50:27.817 に答える