使用 JS 和 CSS 进行高级材料设计过渡 - 从哪里开始？答案

【问题标题】：Advanced Material Design Transition with JS & CSS - Where to start?使用 JS 和 CSS 进行高级材料设计过渡 - 从哪里开始？
【发布时间】：2015-01-26 02:29:19
【问题描述】：

我现在正在为网络制作一些动画原型，并注意到材料设计包含一些非常先进的东西。虽然许多动画示例都可以在网上看到，但我发现其中一个让我真正感兴趣，因为它是流畅的动作。有一段音乐播放器中的过渡视频，其中一个容器脱离了网格，信息从其后面滑出，一个彩色气泡从中生长并覆盖屏幕，同时溶解以显示背景图像。

您可以在此处的“视觉连续性”下找到视频（显示在平板电脑上的使用，但并非如此） http://www.google.com/design/spec/animation/meaningful-transitions.html

这与我习惯的东西相去甚远，在五次尝试失败后，我想看看其他人会如何解决这个问题。关于结构、定位规则或其他任何想法？

【问题讨论】：

标签： javascript css animation transition material-design

【解决方案1】：

你可以使用这个结构来做到这一点：

<div class="container">
  <div class="image-container"></div>
  <img src="coolimage.png">

</div>

图像容器的 background-color 和 border-radius 为 50%，因此它保持为圆形（您可能需要更改高度/宽度才能做到这一点）。

然后在图像上的单击事件期间，您提高元素的 z-index 和 transform: scale() image-container 以便它填充更大的容器（需要 overflow:hidden）。在此期间，您还可以将图像移动到您想要的任何位置。确保按照 Material Design 的规定应用 easeOut 过渡。

【讨论】：

【解决方案2】：

我会从 Polymer 开始 - https://www.polymer-project.org/

然后，请务必查看 Material Design 演示页面和应用：

https://www.polymer-project.org/docs/elements/material.html

【讨论】：