文章/答案/技术大牛

发布

社区首页 >问答首页 >页面转换“跳变”效果

问页面转换“跳变”效果
EN

Stack Overflow用户

提问于 2021-10-26 21:02:15

回答 1查看 67关注 0票数 0

我真的需要帮助，因为我已经尝试了很长一段时间来修复一段代码。

好的，这基本上是我用HTML、CSS和JS编写的一段简单的代码，包含两个页面。

默认情况下，第二页与第一页重叠，但是您可以简单地将第一页的z索引设置为更高，以便它位于第二页的顶部，函数仍然可以工作。

现在的问题是：

我设计的代码是：

当我单击第二页的正文(或文档)时，第一页移动到左侧(-100 0vw)，然后位于第二页(0vw，z-index:1)。

当我单击第一页的正文(或文档)时，第二页向右移动(100 0vw)，然后坐在第一页上(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>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-27 20:41:55

在关键帧定义中有一些不需要的额外帧。特别是，在将元素移动到右侧之前，将其移动到左侧，然后将其移到左侧。

这个片段还移除-webkit-设置只是为了更容易地读取CSS，它确保元素在动画开始时移动到z-index 1(否则会出现混乱的犹豫)。

不需要解决问题中给出的问题，代码片段使用从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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69729929

复制

相似问题

问页面转换“跳变”效果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面转换“跳变”效果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面转换“跳变”效果
EN