CSS-переход, примененный через JavaScript ⇐ CSS

[Anonymous]

Код: Выделить всё

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 */
}

Код: Выделить всё

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.

Get started

HIIIIIIIIIIIIIIIII

Я хочу, чтобы переход применялся ко всей странице, когда я нажимаю кнопку кнопка. я думаю о занавеске как о ориентире для перехода. Когда я нажимаю кнопку, вся страница сдвигается вверх, класс «Описание» и кнопка исчезают, как при переходе на страницу, и там отображается класс «О программе»

Подробнее здесь: https://stackoverflow.com/questions/784 ... javascript