JavaScript点击动画问题：联系人图标点击无动画且需两次触发

为什么需要点击两次才显示？ #

初始时.contactInfo的display: none是在CSS样式表里定义的，而你的JS判断的是行内样式（element.style.display）——这个值初始为空，不是'none'。第一次点击时会走进else分支，把行内样式设为display: none，第二次点击才会触发显示逻辑。

为什么没有过渡动画？ #

1. display: none会直接让元素脱离文档流，过渡动画无法生效（过渡要求元素处于持续渲染状态）。
2. 初始max-width设为500px，和展开后的100px方向相反，无法实现宽度展开的动画；同时visibility和opacity的切换没有配合过渡时间，导致动画不连贯。

修复后的完整代码 #

HTML（结构保持不变）

<div class="contacts">
    <div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
    <div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
</div>

CSS（重构过渡逻辑，实现居中+淡入动画）

.contactIcon {
    overflow: hidden;
    /* 确保图标和文字始终居中对齐 */
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    /* 可选：添加内边距提升点击体验 */
    padding: 4px 8px;
}

.contactInfo {
    visibility: hidden;
    opacity: 0;
    max-width: 0;
    /* 初始状态：延迟visibility显示，避免动画期间元素可交互 */
    transition: visibility 0s 0.3s, opacity 0.3s linear, max-width 0.6s linear;
    /* 可选：图标和联系方式之间加间距 */
    margin-left: 8px;
}

/* 激活状态：触发动画 */
.contactIcon.active .contactInfo {
    visibility: visible;
    opacity: 1;
    max-width: 200px; /* 设为足够容纳联系方式的宽度 */
    /* 激活时取消visibility延迟，让动画同步触发 */
    transition: visibility 0s, opacity 0.3s linear, max-width 0.6s linear;
}

JS（用类切换替代直接操作样式，逻辑更简洁）

const contactIcons = document.querySelectorAll('.contactIcon');
contactIcons.forEach(icon => {
    icon.addEventListener('click', function() {
        this.classList.toggle('active');
    });
});

关键优化点 #

• 用类切换替代行内样式操作，彻底避免样式判断逻辑错误，同时让CSS过渡更可控。
• 移除display: none，改用visibility+opacity+max-width的组合实现：宽度平滑展开+淡入的动画效果，同时保证元素始终在文档流中。
• 给.contactIcon添加inline-flex和align-items: center，确保图标和联系方式始终居中对齐，符合需求。

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