材料设计对网络的有意义的转变答案

【问题标题】：Material design's meaningful transitions for the web材料设计对网络的有意义的转变
【发布时间】：2014-07-01 18:05:13
【问题描述】：

（抱歉，我无法提供任何我要询问的代码，因为我真的不知道从哪里开始。）

关于Meaningful Transitions point in the Material design guidelines。

我对在我的网络应用程序中创建这种平滑过渡非常感兴趣 (especially the one where the profile picture goes from an activity to another)，但我想知道如何使用 html 来实现？

CSS3 过渡是否足以做到这一点（我应该使用哪个样式属性用于直接移动元素）？
我应该使用 JS/Dart 使用奇怪的坐标系统移动“共享视图元素”吗？
它可以在动态/滚动布局上工作还是我应该忘记它？
是否有任何提示可以在视觉上将节点从一个容器平滑过渡到另一个？

简而言之，HTML 是否已为此类内容做好准备（任何代码/文档都会受到赞赏）？我们应该等待一些聚合物工具来做到这一点吗？还是我们不应该在网络上这样做？

【问题讨论】：

标签： css dart polymer dart-polymer material-design

【解决方案1】：

查看 Polymer core-animated-pages 元素 https://elements.polymer-project.org/elements/neon-animation

他们有一些很棒的演示，非常类似于有意义的过渡https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

“图标到顶部栏”演示可能与您引用的最相似（您可以查看源代码以查看使用的 Polymer Web 组件以及必要的 CSS 和 JS

您可以通过 Bower 导入到您的项目中：

bower install Polymer/core-animated-pages

然后用像

这样的属性来包装你的元素并定义过渡

这是该交叉淡入淡出示例的代码：

<style>
#hero1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: orange;
}
#hero2 {
    position: absolute;
    top: 200px;
    left: 300px;
    width: 300px;
    height: 300px;
    background-color: orange;
  }
  #bottom1, #bottom2 {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    height: 50px;
  }
  #bottom1 {
    background-color: blue;
  }
  #bottom2 {
    background-color: green;
  }
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
      <section id="page1">
    <div id="hero1" hero-id="hero" hero></div>
    <div id="bottom1" cross-fade></div>
  </section>
  <section id="page2">
    <div id="hero2" hero-id="hero" hero></div>
    <div id="bottom2" cross-fade></div>
  </section>
</core-animated-pages>

【讨论】：

您可能希望从您的链接中添加一些关键数据，因为如果他们转发的页面出于任何原因离线，仅链接的答案可能变得无关紧要。
太棒了，这正是我想要的！谢谢！ :)
非常欢迎，我不得不为此寻找一段时间，并且喜欢尝试使用核心动画页面

【解决方案2】：

Polymer 不会做任何这些事情。这只是 HTML+CSS+JavaScript。你可以在没有 Polymer 的情况下完成所有这些工作。

Polymer 所做的一切，是否允许您将这些东西封装在自定义元素中。

core-elements 和 paper-elements 就是一些例子。您可以自己构建这些元素，也可以克隆和修改/扩展它们。

【讨论】：

+1 @Vloz：使用 chrome 开发工具，您可以查看动画的 css 并激活“显示用户代理阴影 DOM”以查看聚合物元素

【解决方案3】：

据我所知，聚合物应该能够完成所有这些工作。如果还没有，应该很快就可以了。

Polymer 背后的基本理念是允许您在所有设备（网络、计算机、安卓）上创建一致的界面。因此，如果 Android L 可以进行这些转换，那么它们肯定意味着聚合物也具有这种能力。

【讨论】：