javascript - 单击事件后，JavaScript 可以更改客户端页面中的 CSS 类吗？

Question

我得到了这段 JavaScript，我想通过更改类并让这个(新的)CSS3 效果动画淡入淡入我的 div。我使用了 .click 和 .fadeToogle 之前，但这太滞后了。如果您阅读所有关于 setTimer 和 CSS3 动画的讨论，CSS3 动画在手机上应该会好得多。 (我在 phonegapp 上将其作为混合应用程序来做，所以是的，它真的很慢!)

此代码可在单击时显示我的 div，但无法读取分配给它的新类，并且不会再次关闭 div。这是 JavaScript/jQuery 代码:

$(function() {
  $("#stylesButtonImg").click(function() {
    if ($('#styles').hasClass("closed")) {
      $('#styles').removeClass('closed');
      $('#styles').addClass('open');
    } else if ($('#styles').hasClass("open")) {
      $('#styles').removeClass('open');
      $('#styles').addClass('close');
    }
  });
});

#styles {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: rgba(000, 000, 000, 0.95);
  transition: 1s opacity;
}
.closed{display:none;}
.open{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="stylesButtonImg">click me</button>
<div id="styles" class="closed">
    <?php include 'styles.php';?>
</div>

Answer 1

不要使用 display:none，因为它不能设置动画。请改用不透明度，它是可动画的。此外，toggleClass 将为您在打开/关闭之间切换，而不是您必须自己检查和切换。

$(function() {
  $("#stylesButtonImg").click(function() {
    $('#styles').toggleClass('open', 'closed');
  });
});

#styles {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: rgba(000, 000, 000, 0.95);
  transition: 1s opacity;
}
.closed {
  opacity: 0;
}
.open {
  opacity: 1;
}
#stylesButtonImg {
  position: relative;
  z-index: 2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="stylesButtonImg">click me</button>
<div id="styles" class="closed">
  <?php include 'styles.php';?>
</div>