Question:
I wrote a little code where when I click on a picture, it rotates 360 degrees and the background of the page changes to black, but when I click again to bring everything back, the picture just changes without animation. How do I fix it to animate when clicked again?
window.onload = function(){
setTimeout(function(){
document.getElementById("panel-left").classList.toggle("left")
document.getElementById("panel-right").classList.toggle("right")
document.getElementById("loader").classList.toggle("loaded-circle")
document.getElementById("preloader").classList.toggle("loaded-img")
},1000)
}
function change(){
let bg = document.body;
bg.classList.toggle("dark-mode")
}
body{
background-color: white;
color: black;
transition: 1s;
}
#preloader{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#loader-image{
cursor: pointer;
width: 200px;
height: 200px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: rotate(360deg);
transform: translate(-50%,-50%);
position: relative;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-image: url("https://i5.walmartimages.com/asr/f9082a27-f90a-459f-9844-01e36807651d_1.3ec721f2a45bd618ab157bd25728728a.jpeg");
z-index: 1001;
}
.dark-mode{
background-color: #222;
color: white;
}
#loader {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
border: 10px solid grey;
border-top-color: white;
border-radius: 50%;
animation: spin 500ms linear infinite;
}
@keyframes spin{
from{
transform: translate(-50%,-50%);
}
to{
transform: translate(-50%,-50%)rotate(360deg);
}
}
.loader-section{
width: 50%;
height: 100%;
background-color: #222;
position: fixed;
top: 0;
}
.loader-section.section-left{
left: 0;
}
.loader-section.section-right{
right: 0;
}
.left{
transition: 1s;
transform: translateX(-100%);
}
.right{
transition: 1s;
transform: translateX(100%);
}
.loaded-circle{
transition: 1s;
opacity: 0;
}
.loaded-img{
transition: all .2s 1s ease-out;
transform: translateY(100px);
padding: 1px;
}
.dark-mode #loader-image {
border-radius: 50%;
transition: 1s;
transform: translate(-50%,-50%)rotate(-360deg);
background-image: url("https://www.vippng.com/png/full/274-2744703_spiderman-black-suit-logo.png");
}
<div id="preloader">
<div id="loader-image" onclick="change()">
<div id="loader"></div>
</div>
<div id="panel-left" class="loader-section section-left"></div>
<div id="panel-right" class="loader-section section-right"></div>
</div>
Answer:
window.onload = function(){
setTimeout(function(){
document.getElementById("panel-left").classList.toggle("left")
document.getElementById("panel-right").classList.toggle("right")
document.getElementById("loader").classList.toggle("loaded-circle")
document.getElementById("preloader").classList.toggle("loaded-img")
},1000)
}
function change(){
let bg = document.body;
bg.classList.toggle("dark-mode")
}
body{
background-color: white;
color: black;
transition: 1s;
}
#preloader{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#loader-image{
cursor: pointer;
width: 200px;
height: 200px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: rotate(360deg);
transform: translate(-50%,-50%);
position: relative;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-image: url("https://i5.walmartimages.com/asr/f9082a27-f90a-459f-9844-01e36807651d_1.3ec721f2a45bd618ab157bd25728728a.jpeg");
z-index: 1001;
}
.dark-mode{
background-color: #222;
color: white;
}
#loader {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
border: 10px solid grey;
border-top-color: white;
border-radius: 50%;
animation: spin 500ms linear infinite;
}
#loader-image {
transition: 5s;
}
@keyframes spin{
from{
transform: translate(-50%,-50%);
}
to{
transform: translate(-50%,-50%)rotate(360deg);
}
}
.loader-section{
width: 50%;
height: 100%;
background-color: #222;
position: fixed;
top: 0;
}
.loader-section.section-left{
left: 0;
}
.loader-section.section-right{
right: 0;
}
.left{
transition: 1s;
transform: translateX(-100%);
}
.right{
transition: 1s;
transform: translateX(100%);
}
.loaded-circle{
transition: 1s;
opacity: 0;
}
.loaded-img{
transition: all .2s 1s ease-out;
transform: translateY(100px);
padding: 1px;
}
.dark-mode #loader-image {
border-radius: 50%;
transition: 5s;
transform: translate(-50%,-50%)rotate(-360deg);
background-image: url("https://www.vippng.com/png/full/274-2744703_spiderman-black-suit-logo.png");
}
<div id="preloader">
<div id="loader-image" onclick="change()">
<div id="loader"></div>
</div>
<div id="panel-left" class="loader-section section-left"></div>
<div id="panel-right" class="loader-section section-right"></div>
</div>