我需要复制 CSS Transition 语句吗？

Question

我正在阅读有关 CSS Transitions 的 mozilla 开发人员文档。在他们的simple example中，他们把过渡语句放在元素上，伪class"hover"。

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

是否有必要在伪class "hover" 和主元素上都放置过渡语句？这是最佳实践吗？根据我的经验，我只需要将声明放在元素上即可获得所需的行为。参见示例：http://jsfiddle.net/z6v9do82/

Answer 1

你是对的，在 :hover 上再次指定转换是多余的，因为你已经在更一般的规则上指定了它。 transition 在这方面与任何其他属性完全一样。目前尚不清楚该示例是否出于说明目的在两条规则中重复了声明，或者这只是一个错误。

有趣的是，如果您在 :hover 上指定转换仅而不是一般的无状态规则：

#delay1 {
  font-size: 14px;
}

#delay1:hover {
  transition: font-size 4s 2s;
  font-size: 36px;
}

动画会在元素开始匹配时生效 :hover，但在元素停止匹配时不会生效。要获得相反的效果，即仅在元素停止匹配 :hover 时设置动画，您需要在 :not(:hover):

上指定过渡

#delay1 {
  transition: font-size 4s 2s;
  font-size: 14px;
}

#delay1:hover {
  font-size: 36px;
}

请注意 #delay1 与 #delay1:not(:hover) 不同，因为前者匹配 而不管元素的悬停状态如何 ；它本质上是 #delay1:not(:hover) 和 #delay1:hover 的联合（两者互斥）。

我需要复制 CSS Transition 语句吗？

Do I need to duplicate the CSS Transition statement?

css

css-transitions