如何仅在CSS中结束时才开始另一过渡

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

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

评论