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：如何實現自定義組件的第一個呈現的動畫

回答

相關問題