Question

解决方案：我发现的解决方案是在彼此之上使用两个div（以使功能更清晰，我将其中一个div设为红色），尽管它必须为两个div设置动画以达到效果，但它仍然比使用javascript更干净，更快：

<style>
    .outerDiv {
        width: 100%;
        height: 50px;
        position: relative;
    }

    .hover1 {
        height: 50px;
        width: 50px;
        background: black;
        position: relative;
        top: 0px;
        transition: width 2s
    }

    .hover2 {
        height: 50px;
        width: 50px;
        background: red;
        position: relative;
        top: -50px;
        transition: width 2s 2s
    }

    .outerDiv:hover .hover2 {
        width: 100%;
        transition: width 0s 1.9s;
    }

    .outerDiv:hover .hover1 {
        width: 100%;
        transition: width 2s;
    }
</style>
<div class="outerDiv">
    <div class="hover1"></div>
    <div class="hover2"></div>
</div>

问题：我希望在悬停时向右扩展的div具有不同的向后滑动延迟右侧扩展是否完全完成。我想在没有Javascript的情况下实现它，因为我知道如何使用js。

我已经尝试使用@keyframes和过渡的组合，但是失败了

<style>
    #hoverDiv {
        height: 50px;
        width: 50px;
        background: black;
        transition: width 2s;
        transition-delay: 0s;

    }

    /*
    #hoverDiv:has-transitioned{
        transition-delay-for-mouseoff:1s;
    }
    */

    #hoverDiv:hover {
        width: 100%;
        transition: width 2s;
    }
</style>
<div id="hoverDiv"></div>

Answer 1

这可以通过为正常状态和悬停状态指定不同的过渡时间来实现。

<style>
    #hoverDiv {
        height: 50px;
        width: 50px;
        background: black;
        transition: width 5s; /*Specify required time. 
                               This affects how long it takes to transition 
                               back to the normal state*/


    }  


    #hoverDiv:hover {
       width: 100%;
       transition: width 2s; /*This affects how long it takes to transition 
                               into the hover state*/ 
 }
</style>
<div id="hoverDiv"></div>

此外，如果您想在宽度减小到正常值之前添加延迟，请尝试

 #hoverDiv {
         height: 50px;
         width: 50px;
         background: black;
         transition: width 5s;
         transition-delay: 5s; /*Waits for 5 seconds and then decreases 
                               back to normal size in 5 seconds*/
}

根据过渡Mouseon的状态，mouseoff上的过渡延迟不同（仅CSS）

1 个答案: