当第二次悬停在对象上时，有啥方法可以触发不同的动画？

Posted 2023-03-06

【中文标题】当第二次悬停在对象上时，有啥方法可以触发不同的动画？

【英文标题】：Is there any way to trigger a different animation when hover for the second time on an object?当第二次悬停在对象上时，有什么方法可以触发不同的动画？

【发布时间】：2021-12-19 21:40:25

【问题描述】：

我想在第二次将鼠标悬停在元素上时触发不同的动画，所以第一次会触发正常的动画，但第二次悬停时会触发不同的动画

.star:hover
    animation: myAnim 2s ease 0s 1 normal forwards;

【参考方案1】：

您可以使用与第二个动画触发元素正上方的第一个动画触发器大小相同的绝对定位叠加元素来做到这一点。

通过将元素的 max-height 设置为 0 来结束第一个动画。

下次将鼠标悬停在该区域上时，下方元素的动画将触发。

html

<div class="container">
  <div class="star-first">1st trigger</div>
  <div class="star-second">2nd trigger</div>
 </div>

没有定义动画的 CSS：

.container 
  position; relative;
  width: 50px;
  height: 50px;


.container div 
  width: 100%;
  height: 100%;


.star-first 
  position: absolute;


.star-first:hover 
  animation: animation1 .... forwards; // set max-height: 0 at that animations end


.star-second:hover  
  animation: animation2 ....;

【参考方案2】：

我不确定这是否是您真正需要的，但我在我的网站中使用了它：

    .star
        transition: 0s background-color;
    
    .star:hover
        background-color:red;    
        transition-delay:1s;
    

【讨论】：

不，延迟是悬停时的链式动画，几乎到了，但我想在第二次悬停时触发动画，而不是从第一次悬停开始链接，仍然感谢您的帮助兄弟