Переход CSS не применяется при добавлении класса с JS

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, который будет переключать класс «открытым» к родителю переключите-Nav. Все нужные стили применяются, и они выглядят точно так, как я хочу. Однако по какой-то причине переходная часть полностью игнорируется. Это был долгий день, и я уверен, что просто пропустил что-то глупое, но я не вижу его. У кого-нибудь есть идеи?

Edit: Вот codepen, так что вы можете видеть более ясно, что происходит:

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

Разочаровывающе, в codepen работает, но мой сайт не так, я думаю, что-то еще мешает ему.

Answer 1

Это проблема с оплатой, другая функция перемещает ее в свой родительский элемент при нажатии, чтобы другой класс не применил к нему размытие. Я изменил код, поэтому больше не нужно этого делать. Задача решена.

BTW для тех, кто приходит сюда и думает «хорошо, как исправить переплавку»? Это просто.

Вместо:

el.addClass('open'); 

Вобще:

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

То же самое относится и к части removeClass.