单击按钮时的页面转换 css右、左、上、下

问题描述

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

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

由于页面可以向所有方向显示，因此我单击的按钮应指示页面必须向哪个方向滑动。我如何通过 css 实现这一点？

还是反过来呢？当前页面必须在点击时向右、向左、从上、下滑出？

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

解决方法

$('.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>

css-transitions page-transition

单击按钮时的页面转换 css右、左、上、下

问题描述

解决方法

相关问答