html - 如何仅在一个过渡以 CSS 结束时才开始另一个过渡

Question

我试图制作一个导航栏过渡动画，当有人点击导航栏的汉堡菜单按钮时，我希望背景颜色出现在屏幕上。我想要的动画是它首先获得 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;
}

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

Answer 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本身。