34

如何在 CSS3 过渡结束后将声明的属性应用于元素？我有类似的东西：

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

我希望在 300 毫秒内完成转换后应用 :hover 声明中的填充和边距属性。

4

3 回答 3

23

您可以像这样添加延迟：

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

第一个将在悬停时开始并持续 300 毫秒，第二个将在 400 毫秒后开始并再次持续 300 毫秒。

演示

关于 CSS 技巧的文章

于 2013-05-24T08:52:15.493 回答
5

您可以通过在内部或外部放置另一个元素.something并将填充和边距转换应用于新元素来实现此目的，但transition-delay值设置为等于或大于初始box-shadow转换时间的时间。

因此，例如：

<div class="immediate">
    <div class="later">
        I can haz transitions.
    </div>
</div>

和 CSS：

.immediate {
  background: #eeb;
  transition: box-shadow 300ms;
}

.immediate:hover {
  box-shadow: 0 0 3px black;
}

.later {
   margin: 0;
   padding: 10px 0;
   transition: all 400ms;
   transition-delay: 300ms;
}

.later:hover {
   margin: 10px 0;
   padding: 0;
}

这将在 300 毫秒内执行box-shadow转换，然后在 400 毫秒margin内执行padding（如果您正在寻找效果，您可以将此转换时间设置为 0）。

你可以在 jsFiddle 上试试：http: //jsfiddle.net/gTVVk/2/

编辑： Duncan Beattie 的回答会很好，除非您需要对同一属性执行不同的转换。否则，使用嵌套 div 使事情变得过于复杂是没有意义的。

于 2013-05-24T08:41:16.717 回答
1

当使用@Duncan Beattie 的解决方案时，一个属性将覆盖另一个属性。这应该有效：

transition: box-shadow 300ms linear, padding 300ms linear 400ms;

句法：

transition: [property] [duration] [timing-function] [delay], ... more property-transitions
于 2020-11-10T12:33:33.427 回答