jquery - 使用 CSS 反转动画

Question

我正在通过 jQuery 添加类来应用混合来旋转某些东西:

.rotate-45-left() {
    -webkit-animation: rotate45left 2.55s ease;
    -moz-animation: rotate45left 2.55s ease;
    animation: rotate45left 2.55s ease;
    animation-fill-mode: forwards;
}
@keyframes rotate45left {
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

这是第一次工作，但是我想然后将过渡设置为动画返回到其默认的未旋转位置。我尝试添加一个额外的类，但这会覆盖原始动画；删除类会在不设置动画的情况下重置它。有没有一种简单的方法可以实现这一目标？

Answer 1

function back(){
document.getElementById('ele').classList = "rotate-0-left";
}

.rotate-45-left {
    -webkit-animation: rotate45left 1.55s ease;
    -moz-animation: rotate45left 1.55s ease;
    animation: rotate45left 1.55s ease;
    animation-fill-mode: forwards;
}

.rotate-0-left {
    -webkit-animation: rotate0left 1.55s ease;
    -moz-animation: rotate0left 1.55s ease;
    animation: rotate0left 1.55s ease;
    animation-fill-mode: forwards;
}

@keyframes rotate45left {
    
    100%{
     -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}


@keyframes rotate0left {
   0%{
   -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
   }
    100%{
     -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

<h1 id="ele" class="rotate-45-left"> Rotate </h1>

<input type="button" value="back to original" onClick="back()"/>