Question

我正在尝试进行页面转换，以进入我的网站。我有2个高度为50％，宽度为100％的元素，其中一个放置在主体的前后（使用伪选择器）。我希望将这2个元素滑动到屏幕中间，并覆盖背景内容。通过Java将“正在更改”的类添加到主体时，将触发转换。

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}

body {
  height: 100vh; 
  width: 100%;
  background-color: grey; 
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 

}

body::before {
	top: 0; 
	transform: translateY(-100%); 
}

body::after {
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
	transform: translateY(0); 
}

.loading-bar {
	position: fixed; 
	height: 2px; 
	width: 90%; 
}

.loading-bar::before {
	position: absolute; 
	background-color: aqua; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 100%; 
	transform: scaleX(0);
	transform-origin: left center; 
}

.is-changing .loading-bar::before {
	transform: scaleX(1);
}

<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>

Answer 1

在我看来，您遇到了两个问题。

第一个问题是您忘记在伪元素中包含content属性（通常为空，例如content: ""）。没有此属性，您的伪元素将在DOM中不存在。运行代码段并对其进行检查可以确认这一点，因为无法找到伪元素。

第二，您正在创建多个伪元素。 body::before是它自己的伪元素，而body.is-changing::before是一个单独的伪元素。如果您希望创建一个恒定的元素集，以用作加载显示的“门”，则可能要考虑创建两个实际元素，它们位于视口上方和下方的position: fixed中，然后向内滑动或在添加类时退出。可能是div.upper-door和div.lower-door。

另外，在我看来，您需要转换才能进行转换，否则伪元素将只是来回“捕捉”。在此过渡期间，您可以使用CSS动画控制元素在不同点的位置。您的JavaScript基本上保持不变，除了使用.upper-door定位.lower-door和document.querySelector() div，或者仅使用ID而非类并使用getElementById()定位之外，如果这样做的话对您来说更有意义。您的CSS可能看起来像这样：

div.upper-door {
    top: 0;
    transform: translateY(-100%);
}

div.upper-door.is-changing {
    animation-duration: 5s;
    animation-name: upper-door-closeopen;
}

div.lower-door {
    bottom: 0;
    transform: translateY(100%);
}

div.lower-door.is-changing {
    animation-duration: 5s;
    animation-name: lower-door-closeopen;
}

@keyframes upper-door-closeopen {
    0% {
        transform: translateY(-100%);
    }
    25% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes lower-door-closeopen {
    0% {
        transform: translateY(100%);
    }
    25% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

将.is-changing添加到元素时，将触发CSS动画。在进行实验时，您可能会发现此解决方案的不同排列方式（例如，如果单击按钮会触发加载屏幕，则使用事件侦听器）是理想的选择。

MDN上有大量CSS动画资源，如果您需要更多信息。

Answer 2

您可以使用以下

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}

body {
  height: 100vh; 
  width: 100%;
  background-color: grey; 
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
content:'';
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 

}

body::before {
content:'';
	top: 0; 
	transform: translateY(-100%); 
  transition: .5s all;
}

body::after {
content:'';
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
content:'';
	transform: translateY(0); 
}

.loading-bar {
	position: fixed; 
	height: 2px; 
	width: 90%; 
}

.loading-bar::before {
content:'';
	position: absolute; 
	background-color: aqua; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 100%; 
	transform: scaleX(0);
	transform-origin: left center; 
}

.is-changing,.loading-bar::before {
	transform: scaleX(1);
}

<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>

Answer 3

您错过了在content上添加pseudo-elements属性的操作，该属性是强制性的，因此无法在页面上使用它们。您还错过了在transition上添加pseudo-elements属性来实现向上/向下滑动的动画。

这是一个包含正在运行的演示的代码段，我只使用了与您的问题相关的代码：

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}

body {
  height: 100vh; 
  width: 100%;
  background-color: grey;
  position: relative; /* not really related to your issue but, to make sure that the body's pseudo-elements are positioned relative to the body */
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
    content: ""; /* make the pseudo-elements available */
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 
    transition: all .8s ease-out; /* allow the animation, change this rule per your requirements */
}

body::before {
	top: 0; 
	transform: translateY(-100%); 
}

body::after {
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
	transform: translateY(0); 
}

<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>

Learn more关于after伪元素。

Learn more关于before伪元素。

页面过渡的CSS转换未触发

3 个答案: