如何使用JavaScript实现带动画效果的圆形点击缩放功能

你当前直接修改zoom属性没有过渡效果，是因为没给元素添加CSS过渡配置，而且zoom属于非标准属性，推荐使用性能更好、动画更流畅的transform: scale()实现缩放，仅需修改两处代码：

• 修改圆形元素的CSS代码，添加过渡规则：

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: orange;
  /* 为缩放属性添加0.3秒平滑动画，ease为缓入缓出效果，时长可自行调整 */
  transition: transform 0.3s ease;
  /* 可选配置：如果需要从左上角开始放大就添加该行，默认从圆心位置开始缩放 */
  /* transform-origin: top left; */
}

• 修改JS中的缩放逻辑，替换非标准的zoom写法为标准transform写法：

function zoom() {
  let example = document.getElementById("a");
  example.style.transform = "scale(10)";
}

原有的HTML按钮和圆形元素结构不需要做任何调整，替换代码后点击按钮就能看到丝滑的放大过渡效果。如果需要实现点击切换放大/还原的交互，只需要在JS逻辑中增加状态判断，放大状态下将transform值改回scale(1)即可自动平滑缩回原始尺寸。

内容的提问来源于stack exchange，提问作者muellestermann