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

编辑：这是一个codepen，这样你就可以更清楚地看到发生了什么：

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

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

Answer 1

回流是一个问题，另一个功能是在点击时将其移动到它的父元素，以防止其他类对其应用模糊。我重新构建了代码，因此它不再需要这样做了。问题解决了。

对于任何来到这里并且认为＆＃34;以及如何修复回流的人来说，顺便说一下？＆＃34;很简单。

而不是：

el.addClass('open');

只是做：

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

removeClass部分也是如此。

在使用JS添加类时未应用CSS转换

1 个答案: