怎么用onclick触发一次更改多个组件的动画

可以使用JavaScript来实现一次`onclick`事件触发更改多个组件的动画。以下是一个简单的示例代码：

HTML代码：

<button onclick="animate()">点击我触发动画</button>
<div id="box1"></div>
<div id="box2"></div>

CSS代码：

#box1, #box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript代码：

function animate() {
  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");
  var pos = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (pos == 100) {
      clearInterval(id);
    } else {
      pos++;
      box1.style.width = pos + "px";
      box1.style.height = pos + "px";
      box1.style.backgroundColor = "rgb(" + pos + "," + pos + "," + pos + ")";
      box2.style.width = pos + "px";
      box2.style.height = pos + "px";
      box2.style.backgroundColor = "rgb(" + pos + "," + pos + "," + pos + ")";
    }
  }
}

在这个示例中，当用户点击按钮时，`animate()`函数将会被调用。在`animate()`函数中，我们首先获取需要改变属性的组件（即`<div>`元素），然后使用`setInterval()`函数和`frame()`函数来实现动画效果。在`frame()`函数中，我们通过改变`<div>`元素的属性来实现动画效果。在这个示例中，我们改变了两个`<div>`元素的宽度、高度和背景色。当宽度和高度达到100像素时，动画就结束了。