CSS过渡不适用于使用JS添加类答案

【问题标题】：CSS transition not being applied on adding a class with JSCSS过渡不适用于使用JS添加类
【发布时间】：2016-05-24 20:12:38
【问题描述】：

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

我有以下 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”类切换到 toggle-nav 的父级。所有想要的样式都被应用了，它看起来正是我想要的样子。但是，由于某种原因，过渡部分被完全忽略了。这是漫长的一天，我确定我只是错过了一些愚蠢的简单的东西，但我看不到它。有人有什么想法吗？

编辑：这是一个代码笔，因此您可以更清楚地看到正在发生的事情：

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

令人沮丧的是，codepen 可以正常工作，但我的网站不能，所以我猜有其他东西在干扰它。

【问题讨论】：

你能为我们做一个jsfiddle吗？
顺便说一句，margin-left .5rem 这里是 : 和 ; 跳过。
它是用 Stylus 编写的，所以缺少的逗号和分号很好:) 我们说话的时候我正在制作一个 codepen。
Codepen 添加到问题 :)
那么可以贴一个网页链接吗？

标签： jquery css css-transitions css-transforms

【解决方案1】：

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

顺便说一句，对于任何来到这里并认为“我该如何修复回流？”的人。这很简单。

代替：

el.addClass('open');

只要做：

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

removeClass 部分也是如此。

【讨论】：