transitionend事件判断是opacity是1还是0

在使用 transitionend 事件时，你可以通过比较元素的当前 opacity 值来判断它是变为完全透明（0）还是完全不透明（1）。下面是一个示例代码段，展示了如何监听 transitionend 事件并判断 opacity 的最终状态：

element.addEventListener('transitionend', function(event) {
    // 确保事件目标是我们关心的元素并且是 opacity 过渡结束
    if (event.target === element && event.propertyName === 'opacity') {
        // 判断 opacity 的最终值
        if (parseFloat(element.style.opacity) === 1) {
            console.log('Opacity transition ended at 1 (fully opaque)');
            // 在这里执行 opacity 达到 1 时的逻辑
        } else if (parseFloat(element.style.opacity) === 0) {
            console.log('Opacity transition ended at 0 (fully transparent)');
            // 在这里执行 opacity 达到 0 时的逻辑
        }
    }
});
复制

这段代码中，event.propertyName 用来检查哪个 CSS 属性的过渡刚刚结束，确保我们只在 opacity 过渡结束后执行逻辑。然后，通过 parseFloat(element.style.opacity) 获取元素的当前不透明度，并与 1 或 0 比较，从而判断过渡的最终状态。

请注意，如果你是通过 CSS 类来控制 opacity 的变化，而非直接修改 element.style.opacity，你可能需要在 CSS 中定义这些类，并且在 JavaScript 中检查元素的计算样式（getComputedStyle）来获取实际的 opacity 值。