我能否仅在鼠标移出时应用CSS过渡效果？

Question

CSS的transition属性允许你在鼠标悬停时进行动画效果，包括悬停进入和悬停退出，只需要按照以下方式设置transition属性：

#inner{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner{
    opacity:1;
}

然而，如果将过渡效果移动到 :hover 状态，它只会在鼠标悬停时发生。

#inner{
    opacity:0;
}
#outer:hover #inner{
    opacity:1;
    transition:opacity 2000ms;
}

是否有可能实现相反的效果，即只在鼠标移出时执行动画？

- user4150760

Answer 1

这里有一种实现方式（在 :hover 中为转换属性设置一个无效的属性 bogus 属性 none）：

#inner2{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner2{
    opacity:1;
    transition:none;
}

http://jsfiddle.net/j716sbav/4/

答案已更新以包含@BoltClock的建议。使用none而不是虚假属性肯定更加优雅。

- user4150760

---

虽然这样做是可行的，但更“正确”的方法是使用none而不是虚假属性。请注意，您可以使用长手写transition-property: none或简写transition: none来指定此内容。 - BoltClock

Answer 2

如果您不想多次指定transition属性，可以将过渡效果应用于:not(:hover)，但需要同时交换所有其他声明。

#inner2{
    opacity:1;
}
#outer:not(:hover) #inner2{
    opacity:0;
    transition:opacity 2000ms;
}

任何一种方法都可以，但是如果您不想处理混乱的反转，建议使用transition: none覆盖样式。

同时请注意，CSS选择器代表状态而非事件，这意味着它利用:hover状态而不是mouseover和mouseout事件; 然而，从:hover到:not(:hover)的过渡实际上是表示mouseout动画的CSS方式。

- BoltClock

Answer 3

我知道这是一个非常老的帖子，但是由于它在我的谷歌搜索结果中出现了，所以我想发表我的解决方案。

在阅读了这里发布的所有内容后，我找到了最简单的解决方案。将转换放置在初始状态上，如下所示：

.btn {
  opacity:0;
  transition:0.6s;
}

.btn:hover {
  opacity:1;
  transition:0.8s;
}

因此，它具有从悬停状态到非悬停（即正常）状态的过渡时间和从非悬停状态到悬停状态的过渡时间。这样可以节省大量代码。

- bettsy