我现在正在为网络制作一些动画原型,并注意到材质设计包含了一些相当高级的内容。尽管可以在网上看到许多动画示例,但我发现其中一个因其流畅的运动而引起了我的真正兴趣。音乐播放器中有一段过渡视频,其中一个容器从网格中脱离出来,信息从其后面滑出,并且彩色气泡从中生长出来并覆盖屏幕,同时溶解以显示背景图像。
您可以在“视觉连续性”下找到该视频(在平板电脑上显示使用情况,但在其他方面则不行)
http://www.google.com/design/spec/animation/meaningful-transitions.html
这与我惯用的东西相去甚远,在尝试失败五次之后,我想看看其他人如何解决该问题。关于结构,定位规则或其他任何想法?
最佳答案
您可以使用此结构执行此操作:
<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
)。在此期间,您还可以将图像移动到所需位置。确保按照材料设计的指定应用了一个easyOut过渡。关于javascript - 使用JS和CSS进行高级 Material 设计过渡-从哪里开始?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27171559/