仅当以 CSS 结束时如何开始另一个过渡答案

【问题标题】：How to start another transition only when one ends in CSS仅当以 CSS 结束时如何开始另一个过渡
【发布时间】：2020-08-26 21:42:52
【问题描述】：

我正在尝试制作导航栏过渡动画，当有人单击导航栏的汉堡菜单按钮时，我希望屏幕上出现背景颜色。我想要的动画是它首先获得 100vh 的垂直高度，然后获得 100% 的宽度，但是当我尝试时，两个动画都在协同工作，使它看起来像是从屏幕的左上角长出来的，我想要首先发生垂直高度过渡，然后是宽度过渡。我的代码在下面

当我点击隐藏的复选框来触发过渡效果时，下面的代码就会运行

&__checkbox:checked ~ &__background--1 {
    bottom: 0;
    width: 100%;
}

下面的代码是我想要实现的转换

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s, width 1s;
    transition-delay: width 1s;
}

我只是在尝试，但它只是不起作用:(

【问题讨论】：

width 1s 不是 transition-delay 的有效值。
stackoverflow.com/questions/48119227/… 试试这个。

标签： html css

【解决方案1】：

正如@CBroe 之前所说，width 1s 不是transition-delay 的有效输入。因此，为了使其发挥作用，您应该在元素内内联或单独添加一个值（ms 或 s），就像这样：

内联：

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s 1s, width 1s 1s; /* name | duration | delay */
}

分别：

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s, width 1s;
    transition-delay: 1s, 1s; 
}

注意：有关它的更多信息，您可以阅读transition-delay 或transition 本身。

【讨论】：