时间戳

首页 > 解决方案 > 单击其他选项卡时如何使内容向后滑动？

css - 单击其他选项卡时如何使内容向后滑动？

问题描述

我知道这可能是非常基本的，但我才刚刚开始，无法弄清楚。我已经为内容滑入了很好的动画，但我需要让它在单击其他四个按钮中的任何一个时以相同的方式滑出屏幕。有没有办法做到这一点，同时保持它看起来与现在大致相同？

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>

标签： csstabscss-animations

解决方案

尝试这个：

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%;
}

推荐阅读