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即可使用<?php // Do whatever check you are doing, for the example i'll just return true. echo json_encode([result => true]);为您完成整件事例如：

.toggleClass()

并在语言类中设置标准（已停用），而不是自己的标准。

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

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/

第二次单击时jquery反向动画

3 个答案: