ReactJS中基于三元运算符的元素切换动画实现难题

核心问题是条件渲染会直接移除DOM元素，导致动画无法执行。解决思路是让两个元素始终存在于DOM中，通过状态控制它们的动画样式，而非直接删除/添加元素。

步骤1：修改组件结构，保留两个元素 #

把原有的三元渲染改成同时渲染初始按钮和三个调用按钮，用isActive状态控制它们的动画类：

const CallButton = () => {
    const [isActive, setIsActive] = useState(false);

    return (
        <div className={styles.container}>
            {/* 初始按钮：根据isActive控制退出动画 */}
            <div 
                className={`${styles.main} ${isActive ? styles.mainExit : ''}`}
                onClick={() => setIsActive(true)}
            >
                <div className={styles.notActiveButton}>Связаться со мной</div>
            </div>

            {/* 三个调用按钮容器：根据isActive控制进入动画 */}
            <div className={`${styles.callButtonsWrapper} ${isActive ? styles.callButtonsEnter : ''}`}>
                <div className={styles.callButton}/>
                <div className={styles.callButton}/>
                <div className={styles.callButton}/>
            </div>
        </div>
    );
};

export default CallButton;

步骤2：编写CSS动画样式 #

利用CSS transition 属性实现平滑的位移和透明度变化，容器需设置定位属性让元素可重叠：

.container {
  position: relative;
  width: fit-content;
  height: fit-content;
}

/* 初始按钮基础样式 */
.main {
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* 初始按钮退出动画：向右偏移并淡出 */
.mainExit {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none; /* 动画过程中禁止点击，避免误操作 */
}

/* 三个按钮容器默认状态：隐藏在左侧 */
.callButtonsWrapper {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 8px;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}

/* 三个按钮进入动画：从左侧移回原位并显示 */
.callButtonsEnter {
  transform: translateX(0);
  opacity: 1;
}

/* 保留原有按钮样式 */
.notActiveButton {
  /* 你的原有样式 */
}

.callButton {
  /* 你的原有样式 */
  width: 40px;
  height: 40px;
  background: #007bff;
  border-radius: 50%;
}

关键说明 #

• 用position: absolute让三个按钮和初始按钮重叠在同一位置，保证动画衔接自然
• 统一transition的时长和缓动效果，确保两个元素的动画同步执行
• pointer-events: none避免动画过程中初始按钮仍可被点击，提升交互体验

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