javascript - 第二次点击时jquery反转动画

Question

我想在第二次点击时有一个反向动画，但第二个动画必须与第一个动画相反，但必须具有相同的运动。 我也在 jquery 中写过，因为我希望在单击之后对象停留在该位置，直到我再次单击。

希望你明白我的意思。非常感谢!

JavaScript:

$('.linguait').click(function() {
    if (('.linguait').hasClass('active')) {
        $('.linguait').removeClass('active');
        $('.linguait').addClass('deactive');  
     } else{
        $('.linguait').removeClass('deactive');
        $('.linguait').addClass('active');
     }
 });

CSS:

linguait.active {
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

.linguait.deactive {
    right:5%;
    margin-right: -2px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

Answer 1

只需将您的 jquery 更改为使用 .toggleClass() 即可为您完成全部工作 示例:

$('.linguait').click(function() {
   $(this).toggleClass("active");
});

并在 linguait 类而不是它自己的类中设置你的标准(停用)。

linguait.active {
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

.linguait {
    right:5%;
    margin-right: -2px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}