JavaScript中addEventListener失效：点击pricing_logo无法触发logo_animation

问题描述 #

点击id为pricing_logo的元素时，期望触发logo_animation动画，但点击后无任何动画效果。相关代码如下：

<div id="pricing-div">
    <i id="pricing-logo" class="fa-solid fa-money-bill"></i>
    <div id="pricing-display-div">
        <img src="iphone-black.png" alt="" id="pricing-photo-div">
        <div id="pricing-text-div"><h1 id="pricing-text">Pricing</h1></div>
        <div id="pricing-storage-and-color-div">
            <div id="pricing-storage-div">
                <div id="pricing-storage-128-gb-button"><p id="pricing-storage-128-gb">128 GB</p></div>
                <div id="sep-div"></div>
                <div id="pricing-storage-256-gb-button"><p id="pricing-storage-256-gb">256 GB</p></div>
                <div id="sep-div"></div>
                <div id="pricing-storage-512-gb-button"><p id="pricing-storage-512-gb">512 GB</p></div>
                <div id="sep-div"></div>
                <div id="pricing-storage-1024-gb-button"><p id="pricing-storage-1024-gb">1 TB</p></div>
            </div>
            <div id="pricing-color-div">
                <div id="color-space-black"></div>
                <div id="sep-div"></div>
                <div id="color-gold"></div>
                <div id="sep-div"></div>
                <div id="color-silver"></div>
                <div id="sep-div"></div>
                <div id="color-purple"></div>
            </div>
        </div>
    </div>
</div>
<script>
  var pricing_logo=document.getElementById("pricing-logo");
  pricing_logo.addEventListener("click",function(){
      pricing_logo.style.animationName="logo_animation";
      pricing_logo.style.fontSize="0vw";
  });
</script>

问题原因分析 #

• 缺失动画关键帧定义：代码仅指定了animationName: "logo_animation"，但未在CSS中定义@keyframes logo_animation的具体动画规则，浏览器无法识别要执行的动画效果。
• 元素被强制隐藏：点击时设置fontSize: 0vw，直接让图标元素缩小至不可见，即使动画存在也无法被观察到。
• 缺少动画必要属性：未设置animationDuration（动画时长），默认值为0，动画会瞬间执行完毕，视觉上无任何变化。

修复方案 #

1. 添加CSS动画关键帧 #

先在样式中定义logo_animation的具体动画效果，比如旋转动画：

@keyframes logo_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

2. 修改JavaScript代码 #

移除隐藏元素的fontSize设置，同时补充动画必要属性，推荐通过CSS类控制动画（更易维护）：

方式1：直接设置样式属性

var pricing_logo = document.getElementById("pricing-logo");
pricing_logo.addEventListener("click", function(){
    // 重置动画以支持重复触发
    pricing_logo.style.animation = "none";
    setTimeout(() => {
        pricing_logo.style.animation = "logo_animation 1s ease-in-out";
    }, 10);
});

方式2：通过CSS类控制（更优雅）

先定义CSS类：

.logo-animate {
    animation: logo_animation 1s ease-in-out;
}

再修改JS逻辑：

var pricing_logo = document.getElementById("pricing-logo");
pricing_logo.addEventListener("click", function(){
    // 移除类后重新添加，实现重复触发动画
    pricing_logo.classList.remove("logo-animate");
    setTimeout(() => {
        pricing_logo.classList.add("logo-animate");
    }, 10);
});

内容的提问来源于stack exchange，提问作者cihantokerxxx