时间戳

首页 > 解决方案 > 为什么我的 CSS 过渡在开始之前要等待另一个完成？

css - 为什么我的 CSS 过渡在开始之前要等待另一个完成？

问题描述

我正在尝试做这个项目，展示你可以用 SASS 和 HTML 做什么。没有 JavaScript。但是，我的一个动画表现得很奇怪，我似乎无法弄清楚为什么。我点击导航开始动画，然后它就消失了。然后，一旦单词消失，动画就会开始并结束。

我试过删除贝塞尔时间。我尝试弄乱转换设置，将值从全部更改为转换。我试过弄乱时间（0.4s 到 2s）。

// HTML

<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
        <span class="navigation__icon">&nbsp;</span>
    </label>
    <!-- background for animation  -->
<div class="navigation__background">&nbsp;</div>
    <!-- navigation for page  -->
<nav class="navigation__nav">
    <ul class="navigation__list">
        <li class="navigation__item"><a href="#" class="navigation__link"> <span>01</span>  About Natours</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"> <span>02</span>  Your Benefits</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"> <span>03</span>  Popular Tours</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"> <span>04</span>  Stories</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"> <span>05</span>  Book Tour</a></li>
    </ul>
</nav>

// 按钮的原始状态

&__background {
        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        position: fixed;
        top: 6.5rem;
        right: 6.5rem;
        background-image: radial-gradient($color-primary-light, $color-primary-dark);
        z-index: 1000;
        transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
    }

// 一旦动画开始

&__checkbox:checked ~ &__background {
        transform: scale(200);
    }

假设发生的情况是当用户单击按钮时，背景应该在整个屏幕上展开，并且导航链接应该从左侧滑入。然后，一旦用户关闭导航，导航链接应该向左滑出，同时背景应该收缩。

标签： cssanimationsasstransition

解决方案

推荐阅读