如何在 CSS Material Design 中实现动画答案

【问题标题】：How to implement in CSS material design motion如何在 CSS Material Design 中实现动画
【发布时间】：2017-06-29 18:47:29
【问题描述】：

我尽量尊重材料设计准则。但我不知道如何制作这个效果：Material guideline section Aware

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

有什么想法吗？即使是一个普遍的问题，我也会使用带有 Flex 布局的 Angular Material 框架。因此，任何解决此问题的解决方案都将不胜感激。

【问题讨论】：

请查看MaterialCSS
我不想要一个在一个组件中提供所有功能的库。我已经使用了角材料。我正在 css 中寻找一种方法来轻松处理变形效果，以在圆形按钮和侧边栏形状之间进行自定义平滑过渡。

标签： css angular animation

【解决方案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>

【讨论】：