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

【问题标题】：Page transition css on button click (right, left, up, down)按钮单击时的页面转换 css（右、左、上、下）
【发布时间】：2021-05-19 14:11:00
【问题描述】：

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

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

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

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

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

【问题讨论】：

你想用css和“真正的”pade事务来实现这个吗？不是这样的

标签： css css-transitions page-transition

【解决方案1】：

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

【讨论】：