代码之家 › 专栏 › 技术社区 › Kalhan.Toress

CSS3旋转延迟

css3 css html jquery javascript

2

Kalhan.Toress · 技术社区 · 6 年前

我的网页上有一个链接,只要我点击它,我需要它旋转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秒钟)。同时滑动滑动div也需要时间。但只要我移除这个rotate属性,这个就可以正常工作。

有什么问题吗?

1 回复 | 直到 6 年前

1

0

Vlad Macovei 6 年前

多个元素存在时的延迟可能是由 transition: all . 您应该只指定希望设置动画的参数,否则浏览器将尝试为所有参数计算转换。使用 fa-rotate-180 像jom建议的那样上课要容易得多。

另外,修改.fa类也是一种不好的做法。如果您或其他参与项目的人员希望使用标准行为的.fa图标,会发生什么情况?