第二次单击时 jquery 反向动画

Question

I would like to have a reverse animation on second click, but the second animation must be the opposite of the first but must have the same moviments. I wrote also in jquery because I want that after click the object stays in the position until I click again.

I hope you understand what I mean. Thank you a lot!

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

Simply change your jquery to use the .toggleClass() wich does your whole thing for you example:

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

And set your standard (deactivated) in the linguait class instead of its own.

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;
}

Answer 2

Update your jQuery:

$(document).ready(function() {
  $('.linguait').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('active')) {
      $el.removeClass('active');
      $el.addClass('deactive');
    } else if ($el.hasClass('deactive')) {
      $el.removeClass('deactive');
    } else {
      $el.addClass('active');
    }
  });
});

Use CSS-animation:

@keyframes foo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.linguait.active {
    animation: foo 2s infinite linear;
}
.linguait.deactive {
    animation: foo 2s infinite linear reverse;
}

Answer 3

Here's a practical solution for a pop-out menu using jQuery 3.4.1 and css keyframe animation.

HTML

<div id="ui-menu-bar">
<div class="ui-menu-bar-red"></div>
<div class="ui-menu-bar-white"></div>
<div class="ui-menu-bar-blue"></div>
</div>

<div id='menu-bg'>
some menu stuffs  
</div>

CSS

*{background:#000;}
#ui-menu-bar {position:absolute; width:62px; height:29px; top:26px; left:26px; cursor:pointer;}

@keyframes menu-open{
0% {transform:rotateZ(0deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(360deg) scale3d(1,1,1); opacity:1;}
}

@keyframes menu-close{
0% {transform:rotateZ(360deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(0deg) scale3d(1,1,1); opacity:1;}
}

.ui-menu-bar-red {width:62px; height:5px; background:#ff1800; margin-bottom:7px;}
.ui-menu-bar-white {width:62px; height:5px; background:#fff; margin-bottom:7px;}
.ui-menu-bar-blue {width:62px; height:5px; background:#00a8ff;}

.ui-menu-animate-open{animation: menu-open .6s ease-in-out;}
.ui-menu-animate-close{animation: menu-close .6s ease-in-out;}

#menu-bg {position:absolute; width:20%; padding:40px; background:#515151; color:#fff; top:100px; display:none; text-align:center;}

JS

$("#ui-menu-bar").click(function() {
if ($('#menu-bg').is(":hidden")) {
$('#menu-bg').show(200);
$('#ui-menu-bar').addClass('ui-menu-animate-open');
} else {
if ($('#menu-bg').is(":visible")) {
$('#menu-bg').hide(200);
$('#ui-menu-bar').addClass('ui-menu-animate-close');
}
}
$('#ui-menu-bar').on("animationend", function() {
$('#ui-menu-bar').removeClass('ui-menu-animate-open');
$('#ui-menu-bar').removeClass('ui-menu-animate-close');
});
});

https://jsfiddle.net/v2prkwb9/1/