CODEWITHSUNDEEP
javascripthtmlcssfont-awesome
ROKAF
ROKAF

Reputation: 119

font-awesome icons will not transition transform:rotate(180deg)

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

Upvotes: 3

Views: 2129

Answers (2)

ROKAF
ROKAF

Reputation: 119

The answers posted here seem to resolve the common issues associated with transitioning simple transforms. My case still remains unresolved for reasons unknown but will select this question as answered anyways since the offered solutions should work for most cases.

Upvotes: 0

Jos van Weesel
Jos van Weesel

Reputation: 2188

I used jQuery to fire the onclick function, and CSS to apply the transition effect. I think this works flawless.

$(".button").click(function() {
  $("#arrow").toggleClass("rotate");
});
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.button {
  height: 65px;
  width: 65px;
  background: whitesmoke;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#arrow {
  transition: all .5s ease-in-out;;
}

.rotate {
  transform: rotate(180deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <i id="arrow" class="fa fa-arrow-down fa-2x"></i>
</div>

Upvotes: 1

Related Questions