document.getElementById("getStartedButton").addEventListener("click", function() {
document.querySelector(".description").classList.add("hide-description"); // Add class to hide description
document.getElementById("getStartedButton").classList.add("hide-button"); // Add class to hide button
setTimeout(function() {
document.querySelector(".about").classList.add("show-about"); // Add class to show 'about' section after transition ends
}, 2000); // Adjust this time to match the duration of the transition in CSS
});body {
background-color: black;
}
.description {
position: relative;
margin: 100px auto 50px;
/* shorthand for margin */
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
/* Transition for description opacity */
}
.hide-description {
animation: none;
/* Remove animation for hiding description */
opacity: 0;
/* Hide the description */
}
@keyframes myAnim {
0% {
transform: scaleY(1);
transform-origin: 100% 0%;
}
100% {
transform: scaleY(0);
transform-origin: 100% 0%;
}
}
.slide {
position: relative;
margin: 100px auto 50px;
/* shorthand for margin */
width: 150px;
height: 100px;
border-radius: 30px;
background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 25px;
/* Add your button styling here */
}
.hide-button {
display: none;
/* Hide the button */
}
.about {
display: none;
/* Initially hide the 'about' section */
position: fixed;
/* Stay at the middle of the website */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
}
.show-about {
display: block;
/* Show the 'about' section */
}<div class="description">Yusisista Minimap is a web-based application that provides students and visitors with easy access to navigate the UCC Congress campus, allowing them to locate desired facilities, offices, and rooms with ease and efficiency.</div>
<button id="getStartedButton" class="slide">Get started</button>
<div class="about">HIIIIIIIIIIIIIIIII</div>我希望在单击按钮时将过渡应用到整个页面。我正在考虑用窗帘作为过渡的参考。当我单击按钮时，整个页面将向上滑动，“描述”类和按钮将像页面转换一样消失，并在那里显示“关于”类
我想我得到了你想要的方式，你最好的选择是使用变换翻译，因为这可以让你实现你想要的你可以根据我的感觉进行以下调整，我已附上2这样做的方法，说实话，我更喜欢这种转换，因为它给了你更多的工作自由度，而且如果你添加 javascript 的话，会容易得多
const button = document.getElementById("getStartedButton");
const desc = document.querySelector(".description");
button.addEventListener("click", function() {
desc.classList.add("hide-description"); // Add class to hide description
button.classList.add("hide-button"); // Add class to hide button
setTimeout(function() {
document.querySelector(".about").classList.add("show-about"); // Add class to show 'about' section after transition ends
desc.style.display = "none";
button.style.display = "none";
}, 3000); // Adjust this time to match the duration of the transition in CSS
});
// There is a delay of 1s so overall time will be 3s for this animation to occur, not much changes here/* I have the transform translate animation will make all your stuff slide up and it we set the opacity to 0 because we aren't sure about the height and maybe if something goes wrong we do make it dissapear, we set the display to be none in javascript, that way you know it is gone */
@keyframes myAnim {
0% {
transform: translateY(0%);
opacity: 1;
}
95% {
transform: translateY(-190vh);
opacity: 1;
}
100% {
transform: translateY(-200vh);
opacity: 0;
}
}
/* Javascript will add this class thereby it will add the animation */
.hide-description {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
.hide-button {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
/* Above was the way to achieve it with animation which is a whole lot complex */
/* This is how you would make it with transition for the about section */
.about {
/* use opacity not display none*/
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -200vh);
margin: 0 auto;
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
/* add this transition */
transition: all 2s ease-in-out;
}
/* whatever you want to change goes in this class and you add it with js */
.show-about {
opacity: 1;
transform: translate(-50%, -50%)
}最终结果是这样的
const button = document.getElementById("getStartedButton");
const desc = document.querySelector(".description");
button.addEventListener("click", function() {
desc.classList.add("hide-description"); // Add class to hide description
button.classList.add("hide-button"); // Add class to hide button
setTimeout(function() {
document.querySelector(".about").classList.add("show-about"); // Add class to show 'about' section after transition ends
desc.style.display = "none";
button.style.display = "none";
}, 3000); // Adjust this time to match the duration of the transition in CSS
});body {
background-color: black;
}
.description {
position: relative;
margin: 100px auto 50px;
/* shorthand for margin */
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
/* Transition for description opacity */
}
.hide-description {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
@keyframes myAnim {
0% {
transform: translateY(0%);
opacity: 1;
}
95% {
transform: translateY(-190vh);
opacity: 1;
}
100% {
transform: translateY(-200vh);
opacity: 0;
}
}
.slide {
position: relative;
margin: 100px auto 50px;
/* shorthand for margin */
width: 150px;
height: 100px;
border-radius: 30px;
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 25px;
/* Add your button styling here */
}
.hide-button {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
.about {
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -200vh);
margin: 0 auto;
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
transition: all 2s ease-in-out;
}
.show-about {
opacity: 1;
transform: translate(-50%, -50%)
}<div class="description">Yusisista Minimap is a web-based application that provides students and visitors with easy access to navigate the UCC Congress campus, allowing them to locate desired facilities, offices, and rooms with ease and efficiency.</div>
<button id="getStartedButton" class="slide">Get started</button>
<div class="about">HIIIIIIIIIIIIIIIII</div>希望它能有所帮助，PS：如果确实如此，请考虑投票，我是贡献答案的新手，请随时告诉我您是否喜欢它。