2014-09-21 229 views
3

用動畫的頁面,我想問問有沒有涉及到聚合物的動畫頁面http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages),以及我們如何能夠建立使用在角/材料回購提供的資源類似的演示任何實例(https://github.com/angular/material) 。聚合物與Angularjs

我想實現http://www.polymer-project.org/components/core-animated-pages/demos/music.html但我不想使用聚合物,因爲我想使用Angular。

您能否爲我提供一些指導方針?

回答

1

他們通常用聚合物做的事情是有兩個連接的元素,它們只顯示一個元素,當你執行某個動作時,另一個顯示(從display: none)並從某些維度動畫到最終形式。有時元素也會轉移,但這取決於內容是否能夠移動到新的位置。

您必須使用css transition,transformdisplay。有時甚至是自定義動畫。而你主要是將多個div改爲最終形式。我認爲最困難的是動畫顏色(例如從白色到粉紅色,或者從黃色到綠色),因爲那些最難做到(表現明智)。

如果你看看你設置的例子(最終鏈接),你會看到有一個帶有詳細div的項目列表,一旦你點擊該項目你顯示細節並將內容轉換爲其最終尺寸。

只要知道這些事情是非常困難的,如果你不是非常喜歡Angular或HTML/CSS/Javascript。

聚合物網站的框架是一個非常正在進行的工作,我不會感到驚訝,如果它花了幾個月才能得到類似的結果爲本地和網絡。

你可以舉例如下:https://medium.com/tictail-makers/giving-animations-life-8b20165224c5https://www.polymer-project.org/apps/topeka/http://codepen.io/collection/amheq/。並且不要忘記通過使用一些像這樣的引導主題來加速它,或者其他什麼東西http://fezvrasta.github.io/bootstrap-material-design/

我一直在努力解決同樣的問題,因爲現在沒有太多的事情要做。你說過Angular項目,但這需要時間。如果你現在想做,你必須做很多工作(如果你願意,可以與我們分享),但你可能會更好地推遲它,直到大部分的錯誤和問題都已經解決。 那就是我現在要做的。