css - Material 设计对网络的有意义的转变

Question

(抱歉，我无法提供我所要求的任何代码，因为我真的不知道从哪里开始。)

关于 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 使用奇怪的坐标系统移动“共享 View 元素”吗？
• 它可以在动态/滚动布局上工作还是我应该忘记它？
• 是否有任何提示可以在视觉上将节点从一个容器平滑过渡到另一个容器？<​​/li>

简而言之，HTML 是否已为此类内容做好准备(任何代码/文档都将不胜感激)？我们应该等待一些 polymer 工具来做这件事吗？或者我们不应该在网络中这样做？

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>