要实现 `CSS transition` 动画完成后触发另一个 `div` 的变化，可以通过 JavaScript 监听 `transitionend` 事件来捕获动画结束的时刻，并在事件触发后执行相应的操作。以下是具体实现方法： ### 方法概述 利用 `transitionend` 事件监听器，可以在目标元素的 `transition` 动画结束后执行特定的操作。此方法允许开发者精确控制动画流程，确保只有当第一个动画完全结束后才启动后续动作。 ### HTML 结构 假设页面中有两个 `div` 元素，分别为 `.box1` 和 `.box2`，其中 `.box1` 将会执行 `transform` 动画，而 `.box2` 的样式会在动画结束后发生变化。 ```html <div class="box1"></div> <div class="box2"></div> <button id="startAnimation">开始动画</button> ``` ### CSS 样式 定义 `.box1` 的初始状态及其动画效果，同时设定 `.box2` 的默认样式和可能的变化。 ```css .box1 { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; transition: transform 2s linear; /* 定义动画属性 */ } .box1.active { transform: translateX(300px); /* 平移到右侧 */ } .box2 { width: 100px; height: 100px; background-color: green; opacity: 0; /* 默认透明度为0 */ transition: opacity 1s ease-in-out; /* 定义淡入动画 */ } .box2.visible { opacity: 1; /* 显示时设置不透明 */ } ``` 此处设置了 `.box1` 的移动动画以及 `.box2` 的淡入效果[^4]。 ### JavaScript 控制逻辑 通过 JavaScript 添加事件监听器以检测 `.box1` 的 `transitionend` 事件，并在其触发后更新 `.box2` 的状态。 ```javascript const box1 = document.querySelector('.box1'); const box2 = document.querySelector('.box2'); // 开始动画按钮的功能 document.getElementById('startAnimation').addEventListener('click', () => { box1.classList.add('active'); // 触发 .box1 的动画 // 监听 transitionend 事件 box1.addEventListener('transitionend', handleTransitionEnd); }); function handleTransitionEnd(event) { if (event.propertyName === 'transform') { // 确认是哪个属性完成了过渡 box2.classList.add('visible'); // 修改第二个 div 的可见性 // 防止重复绑定事件 event.target.removeEventListener('transitionend', handleTransitionEnd); } } ``` 在这段代码中，点击按钮会使 `.box1` 执行位移动画，一旦动画完成（即 `transitionend` 被触发），`.box2` 的透明度会被调整至全显[^5]。 --- ###