如何让点击其他标签时内容向后滑动？

Question

我知道这可能是非常基础的，但我才刚刚起步，无法理解。我已经获得了内容滑动的动画，但我需要制作它以便在单击其他四个按钮中的任何一个时它以相同的方式滑回屏幕。有什么方法可以做到这一点，同时保持它看起来与现在大致相同？

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

#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 {
  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%     { position: absolute; left: -21%; top: 0; bottom: 0; margin: auto;}
  100% { position: absolute; left: 4%; top:0; bottom: 0; margin: auto;}
  }

#Slide2 {
  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%     { position: absolute; right: -21%; top: 0; bottom: 0; margin: auto;}
  100% { position: absolute; right: 4%; top:0; bottom: 0; margin: auto;}
  }


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

#Text::-webkit-scrollbar {
    display: none;
}

#Text {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

input { display: none; }  
input + label { display: inline-block; vertical-align: middle;}
input ~ .tab { display: none }       
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5, 
#tab6:checked ~ .tab.content6,
#tab7:checked ~ .tab.content7{ display: block; }
input + label {  
padding: 0 1vw;
border-radius: 1vw;
cursor: pointer;
}

<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 id=Slide><div id=Text><span class=Drop></span>Test1</div></div></section>

<section class="tab content3"><div id=Slide><div id=Text><span class=Drop></span>Test2</div></div></section>

<section class="tab content4"><div id=Slide2><div id=Text><span class=Drop></span>Test3</div></div></section>

<section class="tab content5"><div id=Slide2><div id=Text><span class=Drop></span>Test4 </div></div></section>

Answer 1

试试这个：

jQuery：从这里下载 jQuery：https://jquery.com/

$(document).ready(function () {
    $("label").on("click", function(){
        var id = parseInt($(this).attr("data"));
        $("#content4, #content5").animate({'right':'-25%'}, 100);
        $("#content2, #content3").animate({'left':'-25%'}, 100);
        $("#content"+id).fadeIn();
        if(id > 3){$("#content"+id).animate({'right':0}, 100);}
        else{$("#content"+id).animate({'left':0}, 100);}
        console.log(id);
    });
});

HTML:

<input type="radio" name="tabs" id="tab2" />
<label for="tab2" id="TopLeft" data="2">One</label>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3" id="BottomLeft" data="3">Two</label>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4" id="TopRight" data="4">Three</label>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5" id="BottomRight" data="5">Four</label>

<section class="tab" id="content2">Test1</section>
<section class="tab" id="content3">Test2</section>
<section class="tab" id="content4">Test3</section>
<section class="tab" id="content5">Test4</section>

CSS:

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

label{
border:solid 1px #111;
background:#ffdc73;
color:#000;
padding:5px 10px;
display:inline-block;
position:absolute;
}

#TopLeft {
top:10px;
left:10px;
}

#BottomLeft {
bottom:10px;
left:10px;
}

#TopRight {
top:10px;
right:10px;
}

#BottomRight {
bottom:10px;
right:10px;
}
input[type="radio"]{display:none;}
.tab{
display:none;
position:absolute;
top:50%;
margin:auto 20px;
text-align:center;
margin-top:-14vw;
width: 20%; height: 28vw; max-height: 72%; 
background-color: #f6eddc;
border: solid 1px #000;
border-radius: 0.5vw;
z-index: 1;
transition:all 2s ease-in-out;
}
#content2, #content3{
left:-25%;
}
#content4, #content5{
right:-25%;
}

如何让点击其他标签时内容向后滑动？

How do I make the content slide back when I click the other tabs?

css

tabs

css-animations