css - 如何在CSS中实现material design motion

Question

我尽量遵守 Material 设计指南。但我不知道如何制作这种效果:Material guideline section Aware

如何模拟一个元素到另一个元素的平滑转换。就像一个按钮到一个 block 。我正在为元素定位而苦苦挣扎。绝对定位和响应式设计开始成为一场噩梦，相对或 flex 定位和元素不会相互堆叠并使动画扫视。

有什么想法吗？即使是一般性问题，我也会使用 Angular Material 框架和 Flex Layout。因此，任何解决此问题的解决方案都将不胜感激。

Answer 1

如果基础布局是flex，可以这样做

.container {
  width: 600px;
  height: 300px;
  position: relative;
  border: solid 1px green;
  display: flex;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
}
.button {
  width: 50px;
  height: 50px;
  background-color: teal;
  border-radius: 50%;
  transition: all 1s;
  pointer-events: auto;
}
.container .button:hover {
  width: 100%;
  height: 100%;
  border-radius: 0%;
  opacity: 1;
}
.container:hover div {
  width: 0%;
  height: 0%;
  opacity: 0;
}

<div class="container">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>