javascript – Rotate image on click

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>
Post Views: 3
Scroll to Top