js transition

// 使用 CSS transition 和 JavaScript 实现元素的过渡效果

// HTML 部分
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<button onclick="startTransition()">点击变大</button>

// JavaScript 部分
function startTransition() {
    const box = document.getElementById('box');
    // 添加过渡效果
    box.style.transition = 'all 1s ease';
    // 改变尺寸和颜色
    box.style.width = '200px';
    box.style.height = '200px';
    box.style.backgroundColor = 'blue';
}

// 解释说明：
// 1. 我们定义了一个 div 元素，初始宽度为 100px，高度为 100px，背景颜色为红色。
// 2. 点击按钮后，调用 `startTransition` 函数。
// 3. 在函数中，我们通过 JavaScript 获取该 div 元素，并设置其 `transition` 属性，指定所有样式属性在 1 秒内平滑过渡。
// 4. 接着，我们修改了 div 的宽度、高度和背景颜色，触发过渡效果。
// 5. 当这些样式属性发生变化时，浏览器会自动应用过渡效果，使变化更加平滑自然。