材料设计是网络的有意义的过渡

Question

(对不起,我无法提供任何我要问的代码,因为我真的不知道从哪里开始.)

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

我非常有兴趣在我的网络应用程序中创建这样的平滑过渡(特别是配置文件图片从一个活动到另一个活动的那个),但我想知道如何使用html做到这一点？

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

简而言之,HTML是否已准备就绪(任何代码/文档都会受到赞赏)？我们应该等一些聚合物工具来做这件事吗？或者我们应该在网上不这样做？

Answer 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>

Answer 2

聚合物不做这些事情.这只是HTML + CSS + JavaScript.如果没有聚合物,你可以做到这一切.

所有Polymer都可以,它允许您将这些东西封装在自定义元素中.

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