Question

我正在阅读针对CSS Transitions的mozilla开发人员文档。在他们的simple example中，他们将转换语句放在元素和伪类“悬停”上。

#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;
}

是否有必要将过渡语句放在伪类“悬停”以及主元素上？这是最佳做法吗？根据我的经验，我只需要在元素上添加语句以获得所需的行为。请参阅示例：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语句？

1 个答案: