Question

如何在 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; }

我希望在转换完成300ms后应用：hover声明中的填充和margin属性。

Answer 1

你可以添加这样的延迟：

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

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

DEMO

Article on CSS-Tricks

Answer 2

您可以通过在.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，如果这样做会影响您＆＃ 39;重新寻找）。

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

编辑： Duncan Beattie's answer会很好，除非你需要在同一个属性上执行不同的转换。否则，没有必要用嵌套的div来复杂化。

Answer 3

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

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

语法：

transition: [property] [duration] [timing-function] [delay], ... more property-transitions

转换结束时应用CSS属性

3 个答案: