if/else实现的透明度切换动画首次点击失效问题及解决方案咨询

两个底层逻辑叠加导致了首次点击无响应的现象：

• 样式读取范围的差异：element.style.opacity 只能读取元素行内声明的样式值。你代码里初始的opacity: 1是写在外部CSS规则中的，页面首次加载完成后，通过divElement.style.opacity读取到的值是空字符串''，而非实际的透明度1。
• 隐式类型转换的坑：代码中使用==做弱相等判断时，JS会将空字符串隐式转换为数字0，此时判断'' == 0的结果为true。第一次点击时，代码会走入设置opacity = 1的分支——而元素当前的透明度本来就是1，没有任何样式值变化，自然无法触发CSS过渡动画。
• 实际运行流程对应表现：第一次点击未产生有效样式变更→第二次点击时，上一次操作已经在元素的行内样式中写入了opacity:1，此时条件判断可以正常匹配真实值，切换透明度时能触发过渡，最终表现为第二次点击动画才正常运行。

方法1：读取计算样式获取真实透明度 #

替换原本的行内样式读取逻辑，改用window.getComputedStyle()获取浏览器渲染时计算出的真实样式值，不受样式书写位置的影响：

const fadeInOut = () => {
    const divElement = document.getElementById('demo');
    // 获取计算后的真实透明度值
    const currentOpacity = window.getComputedStyle(divElement).opacity;
    if (currentOpacity == 0) {
        divElement.style.opacity = 1;
    } else {
        divElement.style.opacity = 0;
    }
};

方法2：补全行内初始样式 #

直接将初始透明度写到元素的HTML行内属性中，让divElement.style.opacity一开始就能拿到正确的"1"值，避开空字符串的隐式转换问题：

<div id="demo" style="opacity: 1;"></div>

方法3：类名切换实现切换效果 #

更稳妥的实现方式是预定义状态类，通过类名切换完成动画控制，无需手动读取样式值判断状态，从根源上避免样式读取的各类坑：

1. 新增CSS淡出类规则：

   #demo.fade-out {
       opacity: 0;
   }
   

2. 简化JS逻辑：

   const fadeInOut = () => {
       const divElement = document.getElementById('demo');
       // 自动切换存在/不存在的fade-out类
       divElement.classList.toggle('fade-out');
   };
   

内容的提问来源于stack exchange，提问作者Super Hero Gang SHG