CSS轉換不適用於添加類與JS

因此，我想做的事情，我敢肯定，我必須做過無數次之前，但由於某種原因，這只是不工作。CSS轉換不適用於添加類與JS

我有以下列出的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，這將觸發一個類「開放」來的父切換，導航。所有所需的樣式正在應用，它看起來完全是我想要的樣式。但是，由於某種原因，過渡部分正被完全忽略。這是漫長的一天，我敢肯定，我只是錯過了一些愚蠢而簡單的東西，但我看不見它。有人有主意嗎？

編輯：這是一個codepen這樣你就可以更清楚地看到發生了什麼：

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

無奈的是，在codepen的作品，但我的網站沒有，所以我想別的東西干擾它。

來源

2016-02-13 Alex Foxleigh

你能爲我們做一個jsfiddle嗎？ –

順便說一下，'margin-left .5rem' here're'：''和';'跳過了。 –

這是寫在手寫筆，所以失蹤的逗號和分號很好:)我正在做一個codepen，因爲我們說話。 –

這是一個迴流問題，另一個功能是將它移到它的父元素上，以防止另一個類對它施加模糊。我重構了代碼，所以它不再需要這樣做。問題解決了。

對於任何來到這裏並認爲「我該如何修復迴流？這很簡單。

相反的：

el.addClass('open');

只要做到：

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

這同樣適用於在removeClass一部分。

來源

2016-02-13 18:49:16

CSS轉換不適用於添加類與JS

回答

相關問題