CSS过渡/动画：悬停效果旋转答案

【问题标题】：CSS transition/animation : rotate on hover effectCSS过渡/动画：悬停效果旋转
【发布时间】：2021-03-31 17:53:06
【问题描述】：

所以当应用.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 动画非常熟悉。也许会有延迟？

干杯

【问题讨论】：

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

标签： css css-animations css-transitions

【解决方案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 类，上述代码就会产生动画效果。

【讨论】：