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引起的。您应该只指定要设置动画的参数，否则浏览器将尝试计算所有参数的过渡。按照建议的方式使用fa-rotate-180类要容易得多。

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

CSS3旋转延迟

1 个答案: