0

我正在计划在 Wordpress 中使用导航箭头（按钮）在页面屏幕的顶部、右侧、底部和左侧创建一个网页。通过单击其中一个按钮，您可以进入下一页 - 但页面转换取决于您单击的按钮。

简而言之： 用户点击“右箭头”=下一页从右侧滑入//用户点击“向下箭头”=下一页从底部滑入...

由于页面可以出现在所有方向，我单击的按钮应该指示页面必须向哪个方向滑动。我怎样才能通过css实现呢？

还是反过来起作用？当前页面必须在点击时向右、向左、向上、向下滑动？

我发现了这样的东西：https ://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ 但在这种情况下，所有内容都在一个 html 文件中。那不是真正的页面转换...谢谢

4

1 回答 1

0 

$('.btnRight').click(function() {
   $('.rightPage').toggleClass("activeRight");
});
$('.btnLeft').click(function() {
   $('.leftPage').toggleClass("activeLeft");
});
$('.btnBottom').click(function() {
   $('.bottomPage').toggleClass("activeBottom");
});
$('.btnTop').click(function() {
   $('.topPage').toggleClass("activeTop");
});
.btn {
  background-color: lightgray;
  border: none;
  color: white;
  padding: 3px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 2rem;
  outline: none;
}


.rightPage
{
   height:600px;
   position:absolute;
   top:0;
   right:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeRight
{
   right:0;
}

.leftPage
{
   height:600px;
   position:absolute;
   top:0;
   left:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeLeft
{
   left:0;
}

.bottomPage
{
   height:600px;
   position:absolute;
   bottom:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeBottom
{
   bottom:0;
}

.topPage
{
   height:600px;
   position:absolute;
   top:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeTop
{
   top:0;
}
<body style="width:100%;text-align:center;overflow: hidden;">
<div>
<div class="rightPage">
   <button type="button" class="btn btnRight">close</button> 
</div>
<div class="leftPage">
   <button type="button" class="btn btnLeft">close</button> 
</div>

<div class="bottomPage">
   <button type="button" class="btn btnBottom">close</button> 
</div>
<div class="topPage">
   <button type="button" class="btn btnTop">close</button> 
</div>

</div>



<button type="button" class="btn btnRight">Show Right</button>
<button type="button" class="btn btnLeft">Show Left</button>
<button type="button" class="btn btnBottom">Show Bottom</button>
<button type="button" class="btn btnTop">Show Top</button>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2021-02-16T20:49:51.397 回答