点击其他标签页时如何实现内容原路滑出屏幕的CSS动画效果

解决方案 #

你当前的实现用display: none/block切换标签，而display属性无法触发CSS动画，这是没有滑出效果的核心原因。只需做以下几处修改即可实现需求，且完全保留原有视觉效果：

核心修改点 #

1. 把重复的ID改成类名（页面内ID不允许重复，属于基础规范，不影响原有样式）
2. 新增反向滑出的关键帧动画
3. 替换标签切换逻辑，不用display控制显隐，改用opacity、visibility结合层级控制，保证动画可以正常触发

修改后完整代码 #

CSS部分

body {
background: #adafb2;
color: #8d5b8e;
font-size: 1.4vw;
overflow: hidden;
margin: 0;
padding: 0;
}

#TopLeft {
position : absolute; left: 2%; top: 2%;
width: 5%; height: 1.6vw;
border: solid #403e46;
border-radius: 0.5vw;
text-align: center; 
padding: 0.5vw 0 0.4vw 0;
background: #f6eddc;
}

#BottomLeft {
position : absolute; left: 2%; bottom: 2%;
width: 5%; height: 1.6vw;
border: solid #403e46;
border-radius: 0.5vw;
text-align: center; 
padding: 0.5vw 0 0.4vw 0;
background: #f6eddc;
}

#TopRight {
position : absolute; right: 2%; top: 2%;
width: 5%; height: 1.6vw;
border: solid #403e46;
border-radius: 0.5vw;
text-align: center; 
padding: 0.5vw 0 0.4vw 0;
background: #f6eddc;
}

#BottomRight {
position : absolute; right: 2%; bottom: 2%;
width: 5%; height: 1.6vw;
border: solid #403e46;
border-radius: 0.5vw;
text-align: center; 
padding: 0.5vw 0 0.4vw 0;
background: #f6eddc;
}

/* 左侧滑入元素样式 */
.slide-left {
  position: absolute;
  width: 20%; height: 28vw; max-height: 72%; 
  background-color: #f6eddc;
  animation-name: chacha;
  animation-duration: 2s;
border: solid #000000;
border-radius: 0.5vw;
z-index: 1;
animation-fill-mode: forwards;
}

@keyframes chacha {
   0%     { left: -21%; top: 0; bottom: 0; margin: auto;}
  100% { left: 4%; top:0; bottom: 0; margin: auto;}
}

/* 左侧滑出动画 */
@keyframes chacha-out {
  0% { left: 4%; top: 0; bottom: 0; margin: auto; opacity: 1;}
  100% { left: -21%; top: 0; bottom: 0; margin: auto; opacity: 0;}
}

/* 右侧滑入元素样式 */
.slide-right {
  position: absolute;
  width: 20%; height: 28vw; max-height: 72%; 
  background-color: #f6eddc;
  animation-name: realsmooth;
  animation-duration: 2s;
border: solid #000000;
border-radius: 0.5vw;
z-index: 1;
animation-fill-mode: forwards;
}

@keyframes realsmooth {
   0%     { right: -21%; top: 0; bottom: 0; margin: auto;}
  100% { right: 4%; top:0; bottom: 0; margin: auto;}
}

/* 右侧滑出动画 */
@keyframes realsmooth-out {
  0% { right: 4%; top: 0; bottom: 0; margin: auto; opacity: 1;}
  100% { right: -21%; top: 0; bottom: 0; margin: auto; opacity: 0;}
}


.text-content {
width: 99%; height: 100%;
position: absolute; right: 0; left: 0; margin: auto;
text-align: center;
overflow: auto;
}

.text-content::-webkit-scrollbar {
    display: none;
}

.text-content {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

input { display: none; }  
input + label { display: inline-block; vertical-align: middle;}
/* 替换原来的display:none逻辑 */
input ~ .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 未选中标签的滑出动画 */
input:not(:checked) ~ .tab .slide-left {
  animation-name: chacha-out;
}
input:not(:checked) ~ .tab .slide-right {
  animation-name: realsmooth-out;
}

#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5{ 
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 9;
}
input + label {  
padding: 0 1vw;
border-radius: 1vw;
cursor: pointer;
}

HTML部分

<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1"></label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2"><div id=TopLeft>One</div></label>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3"><div id=BottomLeft>Two</div></label>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4"><div id=TopRight>Three</div></label>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5"><div id=BottomRight>Four</div></label>

<section class="tab content1"></section>

<section class="tab content2"><div class="slide-left"><div class="text-content"><span class=Drop></span>Test1</div></div></section>

<section class="tab content3"><div class="slide-left"><div class="text-content"><span class=Drop></span>Test2</div></div></section>

<section class="tab content4"><div class="slide-right"><div class="text-content"><span class=Drop></span>Test3</div></div></section>

<section class="tab content5"><div class="slide-right"><div class="text-content"><span class=Drop></span>Test4 </div></div></section>

如果需要调整滑入滑出的速度，直接修改对应animation-duration的数值即可，单位是秒。

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