我现在正在为网络制作一些动画原型,并注意到材质设计包含了一些相当高级的内容。尽管可以在网上看到许多动画示例,但我发现其中一个因其流畅的运动而引起了我的真正兴趣。音乐播放器中有一段过渡视频,其中一个容器从网格中脱离出来,信息从其后面滑出,并且彩色气泡从中生长出来并覆盖屏幕,同时溶解以显示背景图像。

您可以在“视觉连续性”下找到该视频(在平板电脑上显示使用情况,但在其他方面则不行)
http://www.google.com/design/spec/animation/meaningful-transitions.html

这与我惯用的东西相去甚远,在尝试失败五次之后,我想看看其他人如何解决该问题。关于结构,定位规则或其他任何想法?

最佳答案

您可以使用此结构执行此操作:

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

</div>


图像容器的background-colorborder-radius为50%,因此它保持为圆形(您可能必须更改高度/宽度才能执行此操作)。

然后,在图像上的单击事件期间,升高元素的z-index,然后升高transform: scale() image-container,以使其填充较大的容器(需要overflow:hidden)。在此期间,您还可以将图像移动到所需位置。确保按照材料设计的指定应用了一个easyOut过渡。

关于javascript - 使用JS和CSS进行高级 Material 设计过渡-从哪里开始?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27171559/

10-11 22:32
查看更多