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

在您的渲染器内部，您可以设置一个标志，该控件/组件被渲染一次。第二次遇到此渲染器时，您将检查此标志并且不会渲染此特定类。

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 回答