javascript - 使用 css 中的变换或其他一些高性能方式从圆创建长圆形

Question

我正在尝试使用圆形创建一个长圆形，transform: scaleX(2)但它会导致椭圆。我通过增加宽度得到了 obround，但在我的应用程序中过渡变得很卡。有没有一种高效的方式来进行这种过渡。我在此处附加了一个沙盒链接以显示该行为。

https://codesandbox.io/s/suspicious-leavitt-r6tcw

标签： javascripthtmlcss

Answer 1

是的，但不是单个元素，因为您需要对形状的主体（您可以将其视为矩形）和两个圆圈进行不同的转换。

$(document).ready(() => {
  $('button').click(() => {
    $('.shape').toggleClass('expanded');
  });
});

.shape {
  position: relative;
  margin-left: 200px;
}

.circle {
  position: absolute;
  top: 0;
  left: -12px;
  background: red;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: blue;
  transition: transform .5s;
}

.rect {
  width: 1px;
  height: 24px;
  background: blue;
  transition: transform .5s;
}

.shape.expanded .circle.left {
  transform: translateX(-32px);
}

.shape.expanded .circle.right {
  transform: translateX(32px);
}

.shape.expanded .rect {
  transform: scaleX(64);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape">
  <div class="circle left"></div>
  <div class="rect"></div>
  <div class="circle right"></div>
</div>

<button>toggle</button>