页面转换的css转换未触发

问题描述 投票：-2回答：3

我有一个页面转换，我正在尝试进入我的网站。我有2个50％的高度，100％宽度的元素，一个放在身体前后（有伪选择器）。我想将2个元素滑动到屏幕中间，覆盖背景内容。当通过Javascript将“正在改变”类添加到正文时，将触发转换。

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>
css css3 css-transitions css-transforms
3个回答
0
投票

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

第一个问题是你忘了在你的伪元素中包含content属性（通常这将是空的，如content: ""）。如果没有此属性，您的伪元素将不会存在于DOM中。运行代码片段并检查它确认了这一点，因为无法找到伪元素。

其次，您正在创建多个伪元素。 body::before是它自己的伪元素，而body.is-changing::before是一个单独的伪元素。如果您希望创建一组恒定的元素作为加载显示的“门”，您可能需要考虑创建两个位于视口上方和下方的position: fixed中的真实元素，然后在类中滑入或滑出被添加。也许这些可能是div.upper-door和div.lower-door。

此外，它看起来像你需要转换的转换，否则伪元素只会来回“快速”。通过使用css动画，您可以在此过渡期间控制元素在不同点的位置。除了使用.upper-door定位.lower-door和document.querySelector() div，或者只是使用ID而不是类并使用getElementById()定位，如果这对你更有意义，你的JavaScript将基本保持不变。你的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动画的绝佳资源。

0
投票

您错过了在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伪元素。

0
投票

您可以使用以下内容

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.