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

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

要在实践中看到这一点:

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

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

Answer 1

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

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

oRm.writeClasses();