Question

这些状态几乎完成了我需要它们执行的所有操作。唯一的问题是，初始化状态后，动画无法在.select-sentence.selected下运行。

由于某种原因，它仅在选择元素后才运行，然后将鼠标悬停在该元素上，最后鼠标移出目标区域。

我希望它在状态初始化时运行，而不是在悬停+鼠标停留时运行

/*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;
}

链接到密码笔：https://codepen.io/vvesper/pen/abbqQGm

Answer 1

由于.select-sentence.selected规则具有更高的特异性且具有较高的优先级，因此未使用.select-sentence:hover:not(.hover)下的bezier计时功能。

使用:hover伪类来设置反映伪类的.hover类可能会引起混乱，特别是如果不这样做就可以实现效果。

此代码段演示了从第二条CSS规则获得的点击时持续时间。颜色已更改为突出显示正在使用的规则。请注意，在鼠标移开时，持续时间是从第一个规则获取的，因为悬停不再有效。

"use strict";
$(".select-sentence").hover(function(e){
  $(e.target).addClass('hover');
  $(e.target).removeClass('unselected');
  }, function(e){
  $(e.target).removeClass('hover');
});


$(".select-sentence").click(function(e){
  $(e.target).removeClass('hover');
  const alreadySelected = $(e.target).hasClass('selected');
  const selectedHover = $(e.target).hasClass('selected', 'hover');
  $(".select-sentence").removeClass('selected');
  if (!alreadySelected) {
    $(e.target).addClass('selected');
  }
  if (selectedHover) {
    $(e.target).addClass('unselected');
  }
});

// $(".select-sentence").click(function(e){
//   $(e.target).removeClass('hover', 'selected');
//   const alreadySelectHover = $(e.target).hasClass('selected', 'hover');
//   $('.select-sentence').removeClass('selected');
//   if alreadySelectHover {
//     $(e.target).addClass('unselect');
//   }
// });

p {
  color: #000000;
  font-size: 16px;
  font-family: Verdana;
}

.directions {
  color: #719b07;
  font-size: 16px;
  font-family: Verdana;
}

.paragraph {
  margin-left: 40px;
  text-align: justify;
 /*  margin-right: 550px; */
  line-height: 1.9em;
}

/* selected hover */
.select-sentence.hover.selected {
  transition: box-shadow .175s;
  transition-timing-function: cubic-bezier(0.4, 0.05, .86, .77);
  box-shadow: inset 0 -23px 0 yellow;
  user-select: none;
}

/*selecting animation from hover and not hover*/ 
.select-sentence.selected {
  transition: box-shadow .175s;
  transition-duration: 1s; /* for demonstration */
  transition-timing-function: cubic-bezier(1,.91,1,2.21);
  box-shadow: inset 0 -22px 0 cyan;
}

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- body-html -->
<p class= "directions">Select the sentence with a sensory detail that describes a <b>sight</b>.</p>

<p class = "paragraph"><br>
  <span class="select-sentence">The king and queen announced they would have a feast at the palace.</span></div>
  <span class="select-sentence">The harvest had happened in August, the time when the summer's riot had ceased to flower.</span> 
  <span class="select-sentence">The ground's vegetation curled into itself, fading brownness.</span> 
  <span class="select-sentence"> Ripe fruits fallen from trees burst open, leaving beads of red and purple amoung the leaves.</span>
  <span class= "select-sentence"> All the people in the land had been invited, from courtiers to peasants.</span>
  <span class= "select-sentence"> Everyone, that is, except the Goblin King.</span></p>

Answer 2

请您尝试使用此规则实现什么

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

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

让我理解您对/* deselecting animation */的理解会很有帮助。

CSS动画将无法在原始JS状态下运行

2 个答案: