过渡结束时应用 CSS 属性

Posted 2023-03-06

【中文标题】过渡结束时应用 CSS 属性

【英文标题】：Apply CSS properties when transition ends

【发布时间】：2013-05-19 19:07:33

【问题描述】：

如何在 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 声明中的填充和边距属性。

【问题讨论】：

看看这个link。

【参考方案1】：

您可以像这样添加延迟：

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

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

DEMO

Article on CSS-Tricks

【讨论】：

添加第二个过渡属性会取消第一个吗？

@TreverThompson 是的，它会的。这不是定义多个转换的方法。您可以看到小提琴正在应用 box-shadow 而没有过渡。见***.com/a/7048326/4730332

所以这里的答案应该是transition: box-shadow 300ms, padding 300ms 400ms;...如果它不能像书面和演示的那样工作，为什么会受到如此高的评价？

【参考方案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）。

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

编辑： Duncan Beattie's answer 会很好，除非您需要对同一属性执行不同的转换。否则没有必要用嵌套的 div 让事情变得过于复杂。

【讨论】：

!important 有必要吗？

不，没必要——这是我的错。如果transition-delay 选项在transition-delay 之后指定，transition: all 400ms 将覆盖该选项。我会更新答案，谢谢。

【参考方案3】：

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

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

语法：

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