javascript - CSS3 旋转延迟

Question

我一点击它就在我的网页上有一个链接，我需要它旋转 180 度。

包含图标向下的链接标记的 HTML:

当点击它时添加类折叠:如果折叠类添加，则将 .fa-caret-down 旋转 180 度。

$(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>

当网页中的元素较少时，此方法效果很好。但是在页面获得更多元素后，此转换需要几秒钟(3 秒)。 #slide-div 的 slideToggle 也需要时间。但是，只要我删除此旋转属性，它就可以正常工作。

这可能是什么问题？

Answer 1

存在多个元素时的延迟可能是由transition:all引起的。你应该只指定你想要动画的参数，否则浏览器会尝试计算所有参数的转换。按照 jom 的建议使用 fa-rotate-180 类要容易得多。

此外，修改 .fa 类也是不好的做法。如果您或从事该元素的其他人想要使用具有标准行为的 .fa 图标，会发生什么情况？