2

openui5/sapui5 用のカスタム コンポーネントをいくつか実装しています。

コンポーネントについては、最初に読み込まれたときに css アニメーションが必要です。次の css を追加すると、これは非常に簡単です。

@-webkit-keyframes card-in-animation {
   from {
     -webkit-transform: translateY(50em) rotate(5deg);
     opacity:0;
   }
}

.card {
   animation:card-in-animation  0.7s .2s ease-out both;
   -webkit-animation:card-in-animation  0.7s .2s ease-out both;
}

コンポーネントが何らかの理由で openui5 フレームワークによって再レンダリングされると、問題が発生します。

その後、DOM 要素は破棄され、新しい要素が作成されます。これにより、アニメーションが再びトリガーされます。

これを実際に見るには：

  1. http://elsewhat.github.io/openui5-cards/cdn/latest/example3.htmlに移動します
  2. 初期アニメーションは必要に応じてトリガーされます
  3. カードの右上隅にあるメニュー アイコンをクリックします。
  4. 新しい不要なアニメーションがトリガーされる

openui5 でこれを回避するための推奨される方法は何ですか?

4

2 に答える 2

6

レンダラー内で、このコントロール/コンポーネントが一度レンダリングされるというフラグを設定できます。このレンダラーに 2 回目に遭遇するときは、このフラグをチェックして、この特定のクラスをレンダリングしません。

if(!oControl._renderedOnce)  {
  oRm.addClass('rotate');
  oControl._renderedOnce = true;
}

oRm.writeClasses();
于 2014-02-05T21:01:16.387 に答える
1

不要な再レンダリングを克服する方法がわかりませんが、カードがレンダリングされた後にアニメーション クラスを削除するオプションはありますか? (すべてのカードを所定の位置に設定するには、onLoad の数秒後にトリガーする必要がある場合があります)

このようなもの：

$("<element_of_your_cards>").removeClass("card")
于 2014-02-05T20:33:21.777 に答える