JavaScript可以改变我的CSS类在客户端点击事件后的页面

不要使用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>

我建议使用

$(function() {
  $("#stylesButtonImg").click(function() {
if ($('#styles').is(":visible")) {
  $('#styles').hide(time);
} else {
  $('#styles').show(time);
}
});
});

其中time是您希望隐藏/显示动画以毫秒为单位的时间(如果您不想要动画，则为0)。如果你这样做，你也不需要css。

如果你要使用jquery的所有功能，不妨使用它。

接着@Robert McKee 的回答。

我将引用OP的评论:

我真的不能改变它显示为none，因为有一个完整的动态网页，我不刷新和每一个"page"在index.php文件中，但整体显示为none结构不会因为空间可见性而改变…

当被迫使用display: none;时，可以使用animation代替。

仍然使用.close和.open类:

.closed {
  opacity: 0;
  display: none;
}
.open {
  display: block;
  animation: activePage 1s forwards;
}

注意现在我们如何在.open类中使用动画，其目的是从opacity: 0动画到opacity: 1;，在 animation-fill-mode 属性中使用forward作为值来保持animation结束后的样式:

@keyframes activePage {
  to {
    opacity: 1;
  }
}

代码片段:

$(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);
}
.closed {
  opacity: 0;
  display: none;
}
.open {
  display: block;
  animation: activePage 1s forwards;
}
#stylesButtonImg {
  position: relative;
  z-index: 2
}
@keyframes activePage {
  to {
    opacity: 1;
  }
}

<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>

因为animation在.closed类上被移除，当切换回关闭"视图"时，将不会有动画。

要解决这个问题，我们可能需要在JS中更进一步。

我将提供的解决方案可能必须由您进行清理和/或改进，其目的是引导您朝着正确的方向前进。

使用jQuery.fn.extend()方法，我们将在单击时切换状态。当动画完成后，它将切换.open和.closed类。

动画将被设置为:

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

代码片段:

$.fn.extend({
  switchView: function() {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    var activeAnimationName = "fadeIn",
      inactiveAnimationName = "fadeOut",
      activeState = "open",
      inactiveState = "closed";
    var toggleState = function(el, animationName, currentState) {
      var $this = $(el);
      $this.removeClass(currentState);
      $this.addClass('animated ' + animationName).one(animationEnd, function() {
        $this.removeClass('animated ' + animationName);
        if (currentState === inactiveState) {
          $this.addClass(activeState);
        } else {
          $this.addClass(inactiveState);
        }
      });
    }
    if (this.hasClass(inactiveState)) {
      toggleState(this, activeAnimationName, inactiveState);
    } else {
      toggleState(this, inactiveAnimationName, activeState);
    }
  }
});
$(function() {
  $("#stylesButtonImg").click(function() {
    $('#styles').switchView();
  });
});

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
#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);
}
.closed {
  display: none;
}
.open {
  display: block;
}
#stylesButtonImg {
  position: relative;
  z-index: 2
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

<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>

通过css淡入淡出由opacity完成。你的css在你定义display: none;和display: block;的地方似乎是错误的。您可以通过opacity: 1;和opacity: 0;更改这些选项

你的css应该像这样:

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

你也可以在你的click函数里面只用一行代码来清理你的整个JS代码。

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

更新!

我没有让它与显示属性一起工作，但我把它改成了可见性属性。正如注释所指出的，元素被分配到一个绝对位置，这使得元素(div)脱离了通常的顺序。然后我添加了overflow:hidden属性来隐藏滚动条和不可见的空间，我认为它在那里，但从来没有。

这是我现在使用的代码:

.closed{
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}
.open{
    overflow: hidden;
    opacity: 1;
    visibility:visible;
 }
#styles{
    transition: .20s linear;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    position:absolute;
    height:100vh;
    width:100vw;
    background-color: rgba(000, 000, 000, 0.95);
}

我得到了这个html代码为我的图片按钮工作作为切换:

<div id="styles" class="closed">
    <?php include 'styles.php';?>
</div>

这是我的javascript，它改变了类，所以没有不必要的javascript被执行，css，这是由手机硬件加速支持，工作得更快，一致的方式。

$(document).ready(function() {
    $(function() {
        $("#stylesButtonImg").click(function() {
            //The div which gets shown.
            $('#styles').toggleClass('open', 'closed');
            //All my other buttons who get faded out if they are active when i want to open the, in this case, styles page.
            $('#rateableUserProfile').removeClass('open').addClass('closed');
            $('#profile').removeClass('open').addClass('closed');
            $('#options').removeClass('open').addClass('closed');
            $('#savedStyles').removeClass('open').addClass('closed');
            $('#camera').removeClass('open').addClass('closed');
        });
    });
});