Question

我正在尝试模仿单击https://www.fpp.net/contact/（右上角为圆形小东西）时从上方打开菜单时出现的动画，但是我的看起来很不稳定，而不是因为松动。 / p>

（在视觉上）似乎他们使用了某种矩形叠加层，而圆形只是填充了它。矩形叠加层是浏览器的宽度和高度，因此似乎圆圈正在变成矩形。

我已经尝试过，但无济于事：

$('#circle').on('click', (event) => {
  $(event.currentTarget).toggleClass('clicked');
});

body {
  
}

#circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  z-index: 999999999;
  top: 30px;
  left: 30px;
  transition: transform 0.75s ease;
  transform-origin: center;
}

#circle.clicked {
  transform: scale(150);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="circle"></div>
</body>

如您所见，他们的动画和我的动画的区别在于，他们的动画以自然的方式膨胀，而我的动画却...怪异地膨胀？

要加重伤害，因为它会扩展得太多，所以会增加浏览器的高度/宽度。

我该怎么办？

Answer 1

您可以使用box-shadow而不是transform和一个较小的伪代码，以避免容器和阴影周围的越野车；

$('#circle').on('click', (event) => {
  $(event.currentTarget).toggleClass('clicked');
});

body {}

#circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: absolute;
  z-index: 999999999;
  top: 30px;
  left: 30px;
  background-color: black;
}

#circle::before {
  content: '';
  height: 28px;
  width: 28px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: inherit;
  transition: 0.75s ease;
  box-shadow: 0 0 0 0vw;
}

#circle.clicked::before {
  box-shadow: 0 0 0 200vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="circle"></div>
</body>

圆圈以填充容器动画

1 个答案: