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

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

要在实践中看到这一点：

去

初始动画会根据需要触发

单击任意卡右上角的菜单图标

将触发新的不需要的动画

---

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

不确定如何克服不必要的重新渲染，但在渲染卡后删除动画类是一种选择吗？（您可能需要在加载后几秒钟后触发它，以便将所有卡设置到位）

大概是这样的：

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

$（“”）。移除类（“卡”）

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

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

oRm.writeClasses();

---

谢谢，这是你通常用css做的。但是，在openui5中重新命名（有时会发生）将从DOM中删除所有HTML元素并重新添加它们。因此，您可以再次添加该类。您可以使用动画结束侦听器，但如果删除了元素，则该侦听器将无法工作。我可能需要跟踪它在实际控件中的第一次渲染谢谢，为此添加了一个内部属性，它工作得很好。github提交openui5卡开发的完整代码看起来不错，你看到了创建Android视图的相似之处吗？谢谢@Jasper_07。不太清楚你要什么。该实现与Android代码非常不同，实际上我在很多方面更喜欢HTML+CSS方法。通过强大的openui5绑定，这些组件很容易在其他项目中重用