元素宽度变化加动画

要实现元素宽度变化加动画，可以使用 CSS3 的 transition 属性。

首先，设置元素的初始宽度和过渡效果的时间：

.element {
  width: 100px;
  transition: width 0.3s ease-out;
}

接着，在 JavaScript 中修改元素的宽度即可触发过渡效果：

document.querySelector('.element').style.width = '200px';

这样，元素的宽度就会从 100px 变为 200px，并且带有 0.3 秒的过渡动画。

注意，为了让过渡效果生效，必须在修改元素宽度之前，先让元素处于渲染树中，比如通过设置元素的 display、visibility 或者 opacity 属性来实现。