Question

我正在为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元素并创建新元素。这会导致动画再次触发。

要在实践中看到这一点：

转到http://elsewhat.github.io/openui5-cards/cdn/latest/example3.html
初始动画按需要触发
点击任意卡片右上角的菜单图标
触发新的不需要的动画

在openui5中避免这种情况的首选方法是什么？

Answer 1

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

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

oRm.writeClasses();

Answer 2

不确定如何克服不需要的重新渲染，但是在渲染卡后删除动画类是否可以选择？（你可能需要在onLoad几秒后触发它，以便所有卡都设置到位）

这样的事情：

$("<element_of_your_cards>").removeClass("card")

openui5：如何仅为第一次自定义组件渲染实现动画

2 个答案: