2014-09-21 115 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项目,但这需要时间。如果你现在想做,你必须做很多工作(如果你愿意,可以与我们分享),但你可能会更好地推迟它,直到大部分的错误和问题都已经解决。 那就是我现在要做的。