CSS 过渡延迟进入但不结束

Question

使用 CSS 我试图让转换延迟按如下方式工作。我想要 1s 的延迟，但我想要 0s 的延迟。

transition: width 0.3s ease-in 1s;
transition: width 0.3s ease-out 0s;

我有以下jsFiddle

Answer 1

试试这个

CSS

.sample {
    padding: 20px;
    background-color: #efefef;
    -webkit-transition: background-color 0.3s ease-out 0s;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    -webkit-transition: background-color 0.3s ease-in 1s !important;
    transition: background-color 0.3s ease-in 1s !important;
}

DEMO HERE

Answer 2

在你的 .active 块下有延迟，因为元素在过渡到绿色时具有活动 class:

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    transition: background-color 0.3s ease-in 1s;
}

JSFiddle

Answer 3

稍微更简洁和可维护的代码，设置transition-delay 属性而不是重写整个transition:

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    transition-delay: 1s;
}

demo

文档：https://developer.mozilla.org/en/docs/Web/CSS/transition

Answer 4

以下对我有用：

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-in 0s;
}
.sample.active {
    background-color: green;
    transition-delay: 1s;
}

您不需要 !important 声明，因为当您覆盖属性.

时，级联会自动优先选择后面的规则

您也不需要重写整个转换规则，因为您特别想要使用相同的转换和不同的延迟而不是不同的过渡。

之所以这样（默认情况下有 0s 延迟）是因为当您删除 .active class 时，您将停止应用它的颜色以及它的过渡延迟因此应用 .sample class 中的延迟。

CSS 过渡延迟进入但不结束

CSS Transition delay in but not out

css

css-transitions