FontAwesome5 (SVG with JS) and Jquery to rotate (animate) an icon 180 degrees

Question

Looking for a bit of help here using FA5 (SVG w/ JS) and Jquery to animate an icon so it will rotate 180 on the click of an element.

My HTML looks like this:

        <div class="card-block">
            <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel">
                <div class="row">
                    <div class="col">
                        <span class="card-text text-primary">View details</p>
                    </div>
                    <div class="col">
                        <i id="blueCaret" class="fas fa-2x blue-caret fa-caret-circle-up float-right"></i>
                    </div>
                </div>
            </a>
        </div>

When rendered in browser it becomes this:

        <div class="card-block">
            <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel" class="collapsed">
                <div class="row">
                    <div class="col">
                        <span class="card-text text-primary">View details<p></p>
                    </span></div>
                    <div class="col">
                        <svg id="blueCaret" class="svg-inline--fa fa-caret-circle-up fa-w-16 fa-2x blue-caret float-right" aria-hidden="true" data-prefix="fas" data-icon="caret-circle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm379.5 27.5l-123-123c-4.7-4.7-12.3-4.7-17 0l-123 123c-7.6 7.6-2.2 20.5 8.5 20.5h246c10.7 0 16.1-12.9 8.5-20.5z"></path></svg><!-- <i id="blueCaret" class="fas fa-2x blue-caret fa-caret-circle-up float-right"></i> -->
                    </div>
                </div>
            </a>
        </div>

CSS looks like this:

#blueCaret{
    transition-duration: 0.8s;
    transition-property: transform;
}
.rotated{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

and some very simple jquery:

    $('#student-change').click(function(){
        $('#blueCaret').toggleClass("rotated");
        console.log('it should turn');
    });

This works in that the icon goes from pointing up on load, to down when the div below it is expanded on click, and then points up again when the user clicks it again.

I would like it to nicely rotate to position however.

Right now it literally just switches from up to down instantly - but I'd like to animate the transition so it looks nice and fluid by rotating it.

I'm sure I am missing something simple, but I can't seem to find how to do this.

score 1 · Accepted Answer · answered Feb 05 '18 at 16:40

I believe this may be due to you trying to apply classes to <svg> elements which I believe jQuery can't do. See this answer to: jQuery SVG, why can't I addClass?. One way to fix that is to wrap the <svg> in a containing element and transform that instead. Consider this example using the code that you say is rendered in the browser, you may need to run the snippet in fullscreen:

$('#student-change').click(function(e) {
  $('#blueCaret').addClass("rotated");
  console.log('it should turn');
  return false;
});

#blueCaret {
  display: inline-block;
  transition: transform 200ms ease;
}

.rotated {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div class="card-block">
  <a id="student-change" data-toggle="collapse" href="#classBreakdownPanel" role="button" aria-expanded="false" aria-controls="classBreakdownPanel" class="collapsed">
    <div class="row">
      <div class="col">
        <span class="card-text text-primary">View details<p></p>
                    </span></div>
      <div class="col">
        <div id="blueCaret">
          <svg class="svg-inline--fa fa-caret-circle-up fa-w-16 fa-2x blue-caret float-right" aria-hidden="true" data-prefix="fas" data-icon="caret-circle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm379.5 27.5l-123-123c-4.7-4.7-12.3-4.7-17 0l-123 123c-7.6 7.6-2.2 20.5 8.5 20.5h246c10.7 0 16.1-12.9 8.5-20.5z"></path></svg></div>
      </div>
    </div>
  </a>
</div>

This worked a treat. I'm really surprised I didn't stumble across the question you linked about not being able to add classes to SVG. Whoops! — Hanny, Feb 05 '18 at 16:57

score 0 · Answer 2 · answered Feb 05 '18 at 16:21

setTimeout(() =>{
  document.querySelector('i')
    .classList.add('rotate')
}, 1000)

.rotate {
  transform: rotate(180deg);
  transition: transform 1s;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<i class="fa fa-caret-up" />

FontAwesome5 (SVG with JS) and Jquery to rotate (animate) an icon 180 degrees

2 Answers2