CSS3 rotate gets delayed

Question

I have a link on my web page as soon as i click on it i need it to be rotate 180 degrees.

Html that includes link tag with icon down:

When click on it add class collapsed: If collapsed class add then rotate the .fa-caret-down in 180 degrees.

$(document).on("click", ".collapse-arrow", function() {
    $(this).toggleClass("collapsed");
    $("#slide-div").slideToggle(500);
});

.collapsed .fa {
    transform: rotate(-180deg);
  }
}

.fa {
  padding: 5px 8px;
  transition: all .2s ease-in-out;
  transform: rotate(0);
  font-size: 15px;
  color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="collapse-arrow room-collapse">
    <i class="fa fa-caret-down"></i>
</a>

This works fine when the web page has fewer elements. But after page gets more elements this transition takes few seconds (3 seconds). Also slideToggle of #slide-div takes time. But this works fine as soon as i remove this rotate property.

What could be the issue here?

is there a reason you're using the `.on()` method? Have you tried `$(".collapse-arrow").click(function() { ... })` instead? — Dacre Denny, Jan 07 '19 at 06:25
@DacreDenny that's really not going to make any difference. FYI, `.click(handler)` is just an alias for `.on('click', handler)` anyway. Also, OP is using event delegation which isn't available via `.click()` — Phil, Jan 07 '19 at 06:26
@Phil does this not incur overhead? https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements#9331127 — Dacre Denny, Jan 07 '19 at 06:28
Thanks both, But i don't think this is the case because if i remove that rotate property from css all works fine. — Kalhan.Toress, Jan 07 '19 at 06:29
@DacreDenny It's just event delegation. I suppose there's a small computational penalty — Phil, Jan 07 '19 at 06:29
Off-topic, but FontAwesome comes with a preset for [rotating the glyphs](https://fontawesome.com/v4.7.0/examples/#rotated-flipped) with `fa-rotate-180`. — Yom T., Jan 07 '19 at 06:29
@K.Toress is there any other script or CSS that could be interfering with the rotation transition? ie `transition-delay` being applied by some selector in your CSS somewhere, etc? — Dacre Denny, Jan 07 '19 at 06:33
@DacreDenny I don't think because its the same delay when i try to add the collapsed class in to the element directly by inspecting element — Kalhan.Toress, Jan 07 '19 at 06:38
@K.Toress Just curious, how many elements in total are you animating in one go? — Yom T., Jan 07 '19 at 06:40
@jom just one animating element, but its get delay with number of element in the page as i see — Kalhan.Toress, Jan 07 '19 at 06:49
Since you are already using `.slideToggle`, might as well try [rotating the caret via script](https://jqueryui.com/animate/), and see if it makes any difference? — Yom T., Jan 07 '19 at 06:50
can you post sample of "#slide-div" content also. https://jsfiddle.net/6o01yw2g/ this is a sample fiddle with fa-rotate-180 — RAGINROSE, Jan 07 '19 at 07:11

score 0 · Answer 1 · answered Jan 07 '19 at 06:58

0

The delay when multiple elements exist is probably caused by transition: all. You should specify only the parameters you desire to animate, otherwise the browser will try to calculate a transition for all parameters. Using the fa-rotate-180 class as jom suggested is much easier.

Also, it is bad practice to modify the .fa class. What happens if you or someone else working on the project wants to use a .fa icon with standard behavior?

answered Jan 07 '19 at 06:58

Vlad Macovei

854
1
11
13

using the `fa-rotate-180` works as the same, no any different, and there is a parent above `.fa` so it will not be effect any where else, Thanks. – Kalhan.Toress Jan 07 '19 at 07:06

CSS3 rotate gets delayed

1 Answers1