Question

我正在尝试使用transform: scaleX(2)从一个圆创建一个圆，但是会导致椭圆。我通过增加宽度获得了成功，但过渡在我的应用程序中变得混乱。是否有执行此过渡的高效方法。我在此处附加一个沙盒链接以显示该行为。

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

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>

使用CSS或其他高效方式从圆上创建圆

1 个答案: