javascript - CSS 动画不会在原始 JS 状态下运行

Question

这些状态几乎可以满足我的所有需求。唯一的问题是动画在.select-sentence.selected下状态初始化时没有运行。

由于某些原因，它仅在元素被选中、然后悬停在其上、最后鼠标离开目标区域时运行。

我希望它在状态初始化时运行，而不是在 hover+mouseout 上运行

/*selecting animation*/ 
.select-sentence.selected {
  transition: box-shadow .175s;
  transition-timing-function: cubic-bezier(1,.91,1,2.21);
  box-shadow: inset 0 -19px 0 #86D7F7;
}

/* unselected hover */
.select-sentence:not(.selected):hover {
  box-shadow: inset 0 -3px 0 0 #86D7F7;
  cursor: pointer;
}

/* deselecting animation */
.select-sentence:hover:not(.hover){
  transition: box-shadow .175s;
  transition-timing-function: cubic-bezier(.25,.1,.25,1);
}

/* selected hover */
.select-sentence.hover{
    box-shadow: inset 0 -22px 0 #D0F2FE;
}

Codepen 链接:https://codepen.io/vvesper/pen/abbqQGm

Answer 1

请问你想用这个规则达到什么目的

  .select-sentence:hover:not(.hover){
    transition: box-shadow .175s;
    transition-timing-function: cubic-bezier(.25,.1,.25,1);
  }

从您的代码中，我注意到当您将鼠标悬停在元素上时，您正在向元素添加一个 .hover 类。但看起来您正在检查您悬停的元素是否没有 .hover 类。

让我明白你所说的 /* 取消选择动画 */ 的意思，这将非常有帮助。