openui5：如何实现自定义组件的第一个呈现的动画

我正在为openui5/sapui5实现一些自定义组件。openui5：如何实现自定义组件的第一个呈现的动画

对于组件，我想在最初加载时有一个css动画。这是很简单的，因为我添加以下的CSS：当组件进行重新渲染出于某种原因被openui5框架

@-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; 
}

，就会出现问题。

然后销毁DOM元素并创建新元素。这会导致动画再次被触发。

要查看这个做法：

转到http://elsewhat.github.io/openui5-cards/cdn/latest/example3.html
在任何卡
一个新的右上角想
单击菜单图标最初的动画被触发触发不需要的动画

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

来源

2014-02-05 dparnas

openui5-cards开发看起来不错，你看到任何与创建Android视图的相似之处？ –

谢谢@ Jasper_07。不太清楚你在问什么。实现与Android代码有很大不同，实际上我更喜欢HTML + CSS方法。而且通过openui5的强大绑定，这些组件在其他项目中很容易被重用。 – dparnas

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

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

oRm.writeClasses();

来源

2014-02-05 21:01:16

谢谢，为此目的添加了一个内部属性，它运行良好。完整的代码在github中提交https://github.com/elsewhat/openui5-cards/commit/cba93303dcbca4df95d5dcca8379ebb9e20191f2 – dparnas

不知道如何克服不必要的重新渲染，但它会是一个选项卡片渲染后删除动画类？（您可能需要的onLoad后，几秒钟后，触发它的所有卡在适当的位置设置）

事情是这样的：

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

来源

2014-02-05 20:33:21 Qualiture

谢谢，这就是你通常用css做的事情。但是，在openui5中重新渲染（有时会发生）将从DOM中删除所有HTML元素并重新添加它们。因此，你会再次添加课程。有一个可以使用的动画结束监听器，但如果元素已被删除，它将不起作用。我可能需要跟踪它是实际控制中的第一个渲染 – dparnas

openui5：如何实现自定义组件的第一个呈现的动画

回答

相关问题