是否有可能在鼠标移出时反转转换执行？

Question

我有两个元素,一个嵌套在另一个元素中.这两个元素有不同的过渡效果,我喜欢当鼠标移出父元素时反转效果顺序.

我的代码看起来像这样:

.parent {
  width : 200px;
  height : 200px;
  background-color : #AF0;
  position : relative;
  transition: background-color 0.22s ease-out;
}

.child {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 0;
  top : 0;
  background : #0AF;
  transition: all 0.22s ease-out 1s;
}

.parent:hover {
  background-color : #FA0;
}

.parent:hover .child {
  width : 200px;
  height : 200px;
  background: #0FA;
}

<div class="parent">
  <div class="child">
  </div>
</div>

如您所见,此代码在我将鼠标悬停超过一秒时正常执行.

问题是鼠标何时出局.父元素更快地更改颜色,然后子元素再次缩小.

那么,是否有任何解决方案只通过使用CSS来实现这种效果？

Answer 1

您需要transition-delay在转换中添加一个,并使其与正常和悬停不同.

孩子需要在悬停时等待1秒,但在mouseout上立即运行

父母需要在悬停时立即运行,但在mouseout上等待1秒,因此子进程首先运行.

.parent {
  width : 200px;
  height : 200px;
  background-color : #AF0;
  position : relative;
  transition: background-color 0.22s ease-out;
  /* delay for mouseout - wait 1s for child to finish */
  transition-delay: 1s;
}

.child {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 0;
  top : 0;
  background : #0AF;
  transition: all 0.22s ease-out;
  /* delay for mouseout - run immediately */
  transition-delay: 0s;
}

.parent:hover {
  background-color : #FA0;
  /* delay for mousein - run immediately */
  transition-delay: 0s;
}

.parent:hover .child {
  width : 200px;
  height : 200px;
  background: #0FA;
  /* delay for mousein - wait 1s for parent */
  transition-delay:1s;
}

<div class="parent">
  <div class="child">
  </div>
</div>