CSS过渡/动画:悬停时旋转效果

Question

所以我有一个在应用.collapse类时旋转的箭头：

​

然后

​

css是：

.my-arrow {
  background: url('arrow.svg');
  transition: transform ease 0.2s;
  transform: rotate(0deg);

  &.collapse {
    transform: rotate(90deg);
  }
}

我还想添加一个悬停效果，以获得更好的用户反馈。

但如果我补充说：

.my-arrow {
  &:hover {
    rotate(90deg);
  }
  &.collapse {
    &:hover {
      rotate(0deg);
    }
  }
}

它在悬停时有效，但当我单击(=添加.collapse类)时，它会旋转回0deg，因为鼠标仍然悬停在div上，这更令人困惑。

有没有办法解决这个问题？我想我可以在JS中使用一个额外的类来切换onmouseleave，但是对于我的用例来说，这太复杂了。

我尝试使用CSS动画：

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(90deg);
  }
}


@keyframes rotate-back {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0);
  }
}
.my-arrow {
  &:hover {
    animation: rotate .2s ease 1;
  }

  .collapse {
    &:hover {
      animation: rotate-back .2s ease 1;
    }
  }

没有成功，而且我在CSS动画中非常n00b。也许要延迟一下？

干杯

Answer 1

​

.hover-rotate{
  transition: transform .3s; /* Apply the transition property. Enables the animation */
}
.hover-rotate:hover{
  transform: rotate(90deg); /* Rotate if mouse is hovered */
}
.hover-rotate.collapse{
  transform: rotate(90deg); /* Rotate if collapse class is present */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<i class="hover-rotate fa fa-chevron-right"></i>

​

您可以使用CSS过渡属性来制作此动画。如果鼠标悬停在图标上或应用了类.collapse，则上面的代码会产生动画效果。