CSS3旋转被延迟
CSS3旋转被延迟
提问于 2019-01-07 14:18:09
我有一个链接在我的网页上，只要我点击它，我需要它是旋转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秒)。另外，# slideToggle -div的使用也需要时间。但是只要我删除了这个rotate属性，它就能正常工作。
这里的问题可能是什么？
回答 1
Stack Overflow用户
发布于 2019-01-07 14:58:00
当存在多个元素时，延迟可能是由transition: all引起的。应仅指定要设置动画的参数，否则浏览器将尝试计算所有参数的过渡。按照jom的建议使用fa-rotate-180类要容易得多。
此外，修改.fa类也是不好的做法。如果您或项目中的其他工作人员希望使用具有标准行为的.fa图标，会发生什么情况？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54069355
复制相关文章
相似问题
腾讯云开发者
