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. 

The last line in the JS function controls this behavior:

```
nav.addEventListener('click', (e) => {
  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
  }
});

```

I've tried adding a "transition: transform 1s;" to ".fa-angle-down", but am having no luck.

The CSS is available via sass/components/\_navigation.scss on the following link: <https://codepen.io/eliya33/project/editor/XpgvJo>