Witam! Dołączę Od razu cały kod, nie jest duży.
A, więc tak klikam na div i stopniowo zmienia się kolor i jest wszystko git.
Teraz chciałbym aby po zakończeniu tej animacji była przerwa, np. 0.3s i włączyła się animacja w której zmienia się padding. Dlatego w funkcji blueFunction dodałem linijkę:
el.classList.toggle("startpadding");
Niestety wtedy przestaje działać zmiana koloru... kolor od razu zmienia się bez efektu przejścia...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
.bluestyle {
cursor: pointer;
width: 100%;
padding: 1rem;
background-color: #2E4A62;
color: white;
font-size: 25px;
}
.startcoloring {
width: 100%;
padding: 1rem;
background-color: #2E4A62;
animation-name: coloranimation;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
@keyframes coloranimation {
from {background-color: #2E4A62;}
to {background-color: #6F9FD8;}
}
.startpadding {
width: 100%;
padding: 1rem;
animation-name: paddinganimation;
animation-fill-mode: forwards;
animation-delay: 0.3s;
animation-duration: 0.5s;
}
@keyframes paddinganimation {
from { padding: 1rem; }
to { padding: 0.5rem; }
}
</style>
</head>
<body>
<div id="testdiv" onclick="blueFunction()" class="bluestyle">
This is my blue element!
</div>
<script>
const blueFunction = () => {
const el = document.getElementById("testdiv");
el.classList.toggle("startcoloring");
el.classList.toggle("startpadding");
}
</script>
</body>
</html>