CSS 使用 JS 添加 class 时未应用过渡

Question

所以我正在尝试做一些我确定我以前一定做过无数次的事情，但由于某种原因，这次没有用。

我有以下 html 的位：

<span class="toggle-nav"><span>Toggle navigation</span></span>

和以下 css：

.toggle-nav {
  position absolute
  top:1rem;
  left:1rem;
  z-index 10
  width: 4rem;
  height: 3.5rem;
  cursor:pointer;
  background: $primary;
  span
  span:before
  span:after {
    content: '';
    position: absolute;
    left:0;
    top:0;
    display: block;
    text-indent: -9999px;
    background-color: #fff;
    height:.5rem;
    width: 100%;
    transition: background-color .5s ease-in-out, transform .5s ease-in-out
  }

  span {
    top: .5rem;
    width: 3rem;
    margin-left .5rem
  }

  .open & {
    span {
      background-color: transparent;
      &:after {
        transform: rotate(-45deg);
        top: 1rem;
      }
      &:before {
        transform: rotate(45deg);
      }
    }
  }
}

我有一些 JS 可以将 'open' 的 class 切换到 toggle-nav 的父级。正在应用所有需要的样式，它看起来正是我想要的样子。但是，由于某种原因，过渡部分被完全忽略了。这是漫长的一天，我确定我只是错过了一些非常简单但我看不到的东西。有人有什么想法吗？

编辑：这是一个代码笔，因此您可以更清楚地看到发生了什么：

http://codepen.io/alexward1981/pen/PZVBZV

令人沮丧的是，codepen 可以工作，但我的网站没有，所以我猜是其他东西干扰了它。

Answer 1

这是回流的问题，另一个函数在点击时将它移动到它的父元素，以防止另一个 class 对其应用模糊。我已经重组了代码，所以它不再需要这样做了。问题已解决。

顺便说一句，对于任何来到这里并认为 "well how do I fix a reflow?" 这很简单的人。

而不是：

el.addClass('open');

就这样：

setTimeout(
    function() {
        el.addClass('open');
    }, 0
);

removeClass 部分也是如此。

CSS 使用 JS 添加 class 时未应用过渡

CSS transition not being applied on adding a class with JS

css

jquery

css-transitions

css-transforms