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 上，这更加令人困惑。< /p>

有没有办法解决这个问题？我想我可以用一个额外的类来切换 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 动画方面非常不擅长。也许有延迟？

干杯

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 类，则上述代码会产生动画效果。