[英]jquery reverse animation on second click
我想在第二次点击时有一个反向动画,但第二个动画必须与第一个相反,但必须具有相同的动作。 我也在 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;
}
只需将您的 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;
}
更新您的 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;
}
这是使用 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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.