Question

基本上我想通过每5秒添加一个类.anim来转换我的元素，但是在转换属性的情况下重置1秒钟。

我想要的效果是每5秒旋转一次箭头。

最好的方法是什么？

setInterval(function(){
    var $el = $("a.inbox");

    $el.addClass('anim');
    setTimeout(function(){
        $el.removeClass('anim');
    }, 1000);
    console.log($el);
}, 5000);

a.inbox:before {
  content: '⇧';
  display: inline-block;
  position: relative;
  -webkit-transform: rotate(180deg);
  margin-left: 5px;

  transition: -webkit-transform 1s;
}

a.inbox {
  &.anim:before {
    -webkit-transform: rotate(540deg);
  }
}

<a href="#" class="inbox">Inbox</a>

Answer 1

只将transition属性放在a.inbox.anim样式中。这意味着转换仅在更改为该类时应用，但在删除时不会应用。

CSS：转换一次转换，然后在没有转换的情况下重置它

1 个答案: