Question

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

如何模拟元素到另一个元素的平滑转换。就像一个块的按钮。我在元素定位上苦苦挣扎。绝对定位和响应式设计开始成为一场噩梦，相对或柔性定位和元素不会相互叠加，并使动画成为可能。[/ p>

有什么想法吗？即使是一般性问题，我也使用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>

如何在CSS材质设计中实现动作

1 个答案: