title: font-awesome icons will not transition transform:rotate(180deg)
body: <p>I'd like the downward arrows on my mobile menu to rotate 180 degrees and face up on click. I'd also like to animate the rotation for a smooth transition. I am using Javascript to toggle a ".js-rotate" class on my ".fa-angle-down" font-awesome class. </p>
  
  <p>The last line in the JS function controls this behavior:</p>
  
  <pre><code>nav.addEventListener('click', (e) =&gt; {
    if (e.target.classList.contains('nav-list-drawer__btn')) {
      e.target.classList.toggle('js-nav-list-drawer__btn');
      e.target.nextElementSibling.classList.toggle('js-nav-list-drawer__list');
      e.target.parentElement.classList.toggle('js-nav-list-drawer');
      e.target.firstChild.classList.toggle('js-rotate'); // breaks  on IE11. Place last so code before it is parsed before the entire function breaks and pauses
    }
  });
  </code></pre>
  
  <p>I've tried adding a "transition: transform 1s;" to ".fa-angle-down", but am having no luck.</p>
  
  <p>The CSS is available via sass/components/_navigation.scss on the following link: <a href="https://codepen.io/eliya33/project/editor/XpgvJo" rel="nofollow noreferrer">https://codepen.io/eliya33/project/editor/XpgvJo</a></p>