第二次單擊時 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;
}

Answer 2

更新您的 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');
    }
  });
});

使用 CSS 動畫：

@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

這是使用 jQuery 3.4.1 和 css 關鍵幀動畫的彈出菜單的實用解決方案。

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/