页面过渡"jumpy"效果

我真的需要帮助，关于一段代码，我一直试图修复很长一段时间了。

好的，这基本上是我用HTML, CSS和JS写的一个简单的代码，涉及两个页面。

[默认情况下，第二个页面与第一个页面重叠，但您可以简单地将第一个页面的z-index设置得更高，以便它位于第二个页面的顶部，该函数仍然有效。]

现在的问题:

我设计了这样的代码:

当我点击第二页的主体(或文档)时，第一页向左移动(-100vw)，然后位于第二页(0vw, z-index:1)

当我点击第一页的主体(或文档)时，第二页向右移动(100vw)，然后位于第一页(0vw, z-index:1)

(我在CSS中使用关键帧)。

当你在浏览器中查看效果时，你会注意到在从一个页面跳到另一个页面的时候，会有一个"跳转"。效果。

在某一点上，动画流畅，然后，在另一点上，它给出了这个"跳跃";效果(这真的很烦人)

请帮我修改这段代码，移除"效果和使所需的页面过渡顺利运行

下面是代码文件(JS,CSS,HTML)

var pg_one = document.getElementById("pg_one");
var pg_two = document.getElementById("pg_two");
pg_one.onclick=()=>{
pg_two.className = "pg_two";
pg_one.className = "";
}
pg_two.onclick=()=>{
pg_one.className = "pg_one";
pg_two.className = "";
}

*,
*::after,
*::before{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
overflow: hidden;
}
section#pg_one{
display: grid;
align-items: center;
justify-items: center;
width: 100%;
height: 100%;
position: absolute;
background-color: #5944f0;
/* z-index: 1; */
}
.pg_one{
animation-name: p1off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p1off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(-100vw);
-ms-transform: translateX(-100vw);
transform: translateX(-100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}
section#pg_two{
position: absolute;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
background-color: #d0277f;
}
.pg_two{
animation-name: p2off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p2off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(100vw);
-ms-transform: translateX(100vw);
transform: translateX(100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}

<body>
<section id="pg_one">
<span>
<label for="txt">Enter name here:&#xa0;</label><input type="text" id="txt"/>
</span>
</section>
<section id="pg_two">
<span>
<label for="pwd">Choose password:&#xa0;</label><input type="password" name="" id="pwd"/>
</span>
</section>
</body>

关键帧定义中有不需要的额外帧。特别是先把元素移到左边，再把它移到右边，然后再把它移到左边。

这个片段还删除了-webkit- settings，只是为了更容易阅读CSS，它确保元素在动画开始时移动到z-index 1(否则可以看到轻微的犹豫)。

不需要解决问题中给出的问题，代码片段使用了add和remove从classList中删除，而不是改变元素的整个classList(以防将来你想要其他类也在那里)。

var pg_one = document.getElementById("pg_one");
var pg_two = document.getElementById("pg_two");
pg_one.onclick = () => {
pg_two.classList.add("pg_two");
pg_one.classList.remove("pg_one");
}
pg_two.onclick = () => {
pg_one.classList.add("pg_one");
pg_two.classList.remove("pg_two");
}

*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
section#pg_one {
display: grid;
align-items: center;
justify-items: center;
width: 100%;
height: 100%;
position: absolute;
background-color: #5944f0;
}
.pg_one {
animation-name: p1off;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p1off {
0% {
transform: translateX(-100vw);
z-index: 1;
}
100% {
transform: translateX(0);
z-index: 1;
}
}
section#pg_two {
position: absolute;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
background-color: #d0277f;
}
.pg_two {
animation-name: p2off;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p2off {
0% {
transform: translateX(100vw);
rz-index: 1;
}
100% {
transform: translateX(0);
z-index: 1;
}
}

<section id="pg_one">
<span>
<label for="txt">Enter name here:&#xa0;</label><input type="text" id="txt"/>
</span>
</section>
<section id="pg_two">
<span>
<label for="pwd">Choose password:&#xa0;</label><input type="password" name="" id="pwd"/>
</span>
</section>

相关内容

最新更新

热门标签：