Переход CSS применен через проблему JavaScript ⇐ CSS

[Anonymous]

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

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

const getStartedButton = document.getElementById("getStartedButton");
const homeButton = document.getElementById("homeButton");
const desc = document.querySelector(".description");
const slideButton = document.querySelector(".slide");

// Event listener for the get started button
getStartedButton.addEventListener("click", function() {
desc.classList.add("hide-description"); // Add class to hide description
slideButton.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
document.querySelector(".homebut").classList.add("show-homebut");
desc.style.display = "none";
slideButton.style.display = "none";
}, 2000); // Adjust this time to match the duration of the transition in CSS
});

// Event listener for the home button
homeButton.addEventListener("click", function() {
document.querySelector(".about").classList.remove("show-about"); // Remove class to hide 'about' section
document.querySelector(".homebut").classList.remove("show-homebut");
setTimeout(function() {
desc.classList.remove("hide-description"); // Remove class to show description
slideButton.classList.remove("hide-button"); // Remove class to show button
desc.style.display = "block";
slideButton.style.display = "block";
}, 2000);  // Adjust this time to match the duration of the transition in CSS
});

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

body {
background-color: blue;
}

.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-left: 100vh;
/* 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: 45%;
left: 33.3%;
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 {
animation: myAnim1 2s ease-in-out 0s 1 normal both;
}

@keyframes myAnim1 {
0% {
opacity: 0;
transform: translateY(50%);
}
100% {
opacity: 1;
transform: translateY(-50%);
}
}

.homebut {
opacity: 0;
position: fixed;
margin-top: 85vh;
margin-left: 46%;
/* 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 */
}

.show-homebut {
animation: myAnim2 2s ease-in-out 0s 1 normal both;
}

@keyframes myAnim2 {
0% {
opacity: 0;
transform: translateY(50%);
}
50% {
opacity: 0;
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(-50%);
}
}

.show-slide {
animation: myAnim3 2s ease-in-out 0s 1 normal both;
}

@keyframes myAnim3 {
0% {
opacity: 0;
transform: translateY(-50%);
}
50% {
opacity: 0;
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(50%);
}
}

.show-description {
animation: myAnim4 2s ease-in-out 0s 1 normal both;
}

@keyframes myAnim4 {
0% {
opacity: 0;
transform: translateY(-50%);
}
100% {
opacity: 1;
transform: translateY(50%);
}
}

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

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
Home

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