Css 材料设计&x27；这对网络来说是有意义的转变

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

关于这个问题

我对在我的web应用程序（）中创建如此平滑的转换非常感兴趣，但我想知道如何使用html来实现它

• CSS3转换是否足够（我应该使用哪个样式属性 用于移动图元（直接）
• 我是否应该使用JS/Dart使用奇怪的坐标系移动“共享视图元素”
• 它能在动态/滚动布局上工作吗？或者我应该忘记它吗
• 是否有一些技巧可以在平滑过渡中将节点从一个容器移动到另一个容器

---

简言之，HTML是否已准备好用于此类内容（如有任何代码/文档，将不胜感激）？我们是否应该等待一些聚合物工具来完成这项工作？或者我们不应该在网络上这么做？

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

---

polymer背后的基本理念是允许您在所有设备（web、计算机、android）上创建一致的接口。所以，如果安卓L能够完成这些转换，那么它们肯定意味着聚合物也具有这种能力

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

聚合物所能做的就是，它允许你将这些东西封装在一个定制的元素中

---

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

查看Polymer core动画页面元素

他们有一些很棒的演示，非常类似于有意义的转换

“从图标到顶部栏”的演示可能与您引用的演示最为相似（您可以查看源代码以查看所使用的聚合网络组件，以及必要的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>

#英雄1{
位置：绝对位置；
排名：0；
左：0；
宽度：300px；
高度：300px；
背景颜色：橙色；
}
#英雄2{
位置：绝对位置；
顶部：200px；
左：300px；
宽度：300px；
高度：300px；
背景颜色：橙色；
}
#底部1，#底部2{
位置：绝对位置；
底部：0；
排名：0；
左：0；
高度：50px；
}
#底部1{
背景颜色：蓝色；
}
#底部2{
背景颜色：绿色；
}
//英雄过渡和交叉褪色在别处声明

+1@Vloz：使用chrome开发工具，您可以看到动画的css并激活“Show user agent shadow DOM”要查看聚合元素，您可能需要添加链接中的一些关键数据，因为如果他们转发的页面因任何原因脱机，仅链接的答案可能会变得无关紧要。太棒了，这正是我想要的！谢谢！：）非常欢迎，我花了一段时间才找到那个，我喜欢尝试核心动画页面