点击按钮实现div淡入淡出或左右滑动切换的技术需求

需求：

• 两个div元素secA初始显示，secB初始隐藏
• 点击各自按钮切换显示状态，隐藏自身并展示另一个
• 需添加淡入淡出效果，优先支持左右滑动动画

问题分析 #

原代码使用display: none/block切换状态，这种方式无法触发CSS过渡动画——因为display属性的变化是瞬间完成的，没有中间过渡过程。要实现平滑动画，需要改用支持过渡的CSS属性（如opacity、transform、visibility），并通过类来控制状态切换。

方案1：淡入淡出效果 #

HTML代码 #

<html>
<body>
  <div class="section active" id="secA">
    Section A<br/>
    <button class="button" onclick="toggleSection()">To Section B</button>
  </div>
  
  <div class="section" id="secB">
    Section B<br/>
    <button class="button" onclick="toggleSection()">To Section A</button>
  </div>
</body>
</html>

CSS代码 #

.section {
    background-color: red;
    color: white;
    height: 50px;
    width: 100px;
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
    /* 初始隐藏状态 */
    opacity: 0;
    visibility: hidden;
    /* 0.3秒平滑过渡 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 显示状态 */
.section.active {
    opacity: 1;
    visibility: visible;
}

/* 单独设置secB的背景色 */
#secB {
    background-color: green;
}

.button {
    border-radius: 50px;
    padding: 5px;
    margin-top: 5px;
}

JavaScript代码 #

function toggleSection() {
    const secA = document.getElementById("secA");
    const secB = document.getElementById("secB");
    // 切换两个元素的active类
    secA.classList.toggle("active");
    secB.classList.toggle("active");
}

方案2：左右滑动动画 #

在淡入淡出的基础上，添加横向位移的过渡效果，实现滑动切换：

CSS代码（替换方案1中的.section相关样式） #

.section {
    background-color: red;
    color: white;
    height: 50px;
    width: 100px;
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
    /* 初始隐藏状态：透明+左侧偏移 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    /* 0.4秒平滑过渡所有属性 */
    transition: all 0.4s ease;
}

/* 显示状态：不透明+原位 */
.section.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* secB初始状态设为右侧偏移 */
#secB {
    background-color: green;
    transform: translateX(100%);
}

说明 #

滑动动画通过transform: translateX()控制元素的左右位置，配合opacity和visibility，切换active类时，当前元素会向侧边滑出并淡出，目标元素从另一侧滑入并淡入，实现连贯的切换效果。

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