6

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

关于材料设计指南中的有意义的过渡点。

我对在我的网络应用程序中创建这种平滑过渡非常感兴趣（尤其是个人资料图片从一个活动转到另一个活动的那个），但我想知道如何使用 html 来做到这一点？

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

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

4

3 回答 3

7

查看 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>
于 2014-08-26T15:45:33.683 回答
5

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

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

核心元素和纸张元素是一些例子。您可以自己构建这些元素，也可以克隆和修改/扩展它们。

于 2014-07-02T13:29:15.693 回答
2

据我所知，聚合物应该能够做到这一切。如果还没有，应该很快就可以了。

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

于 2014-07-01T20:39:12.790 回答