javascript - 关闭时更改动画哦汉堡包图标

Question

我有这段代码，效果很好!但是我想做的是在 JAVASCRIPT 中添加另一个类，可以说是非事件的，这样我可以在关闭 X 时添加另一个动画。但是我在创建它时遇到了问题。我可以使用 toggleClass 执行此操作还是应该使用什么？谁能帮帮我？

$(document).ready(function() {
  $(".icon").click(function() {
  $(".icon").toggleClass("active");
});});

body {
  margin: 0;
  padding: 0;
  background: #ff5c40;
} 

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: transition(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
 }

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 16px;
}

.hamburger:before {
  top: -16px;
}

.icon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
  top: 0px;
  -webkit-transform: rotate(-135deg) ;
   transform:  rotate(-135deg);
   -webkit-transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
    transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
    transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
    transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
  }

 .icon.active .hamburger:after {
   top: 0px;
   -webkit-transform: rotate(-45deg) ;
   transform: rotate(-45deg);
   transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
   transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
   transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon">
  <div class="hamburger">
  </div>
</div>

Answer 1

您只需在切换后检查 .icon 是否没有 .active 类，然后您就可以添加任何您想要的功能。

$(document).ready(function() {
    $(".icon").click(function() {
        $(this).toggleClass("active");

    /* Check if the icon does not have class active */
    if(!$(this).hasClass("active")){
        /* Do something, for example add class color-icon that changes the color of the hamburguer,
      show an alert... */
      $(".icon .hamburger").addClass("non-active");
    }else{
        $(".icon .hamburger").removeClass("non-active");
    }

    });
});

这是添加了代码和 CSS 的示例:http://jsfiddle.net/9yrvwou0/