Различная задержка перехода на mouseoff в зависимости от состояния transition-mouseon (только css) - PullRequest
Новая
       38

Различная задержка перехода на mouseoff в зависимости от состояния transition-mouseon (только css)

0 голосов
/ 04 июня 2019

РЕШЕНИЕ: Решение, которое я нашел, заключается в использовании двух элементов 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 и transition, но не смог 

<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>

1 Ответ

0 голосов
/ 05 июня 2019

Этого можно достичь, указав различное время перехода для нормального состояния и состояния при наведении. 

<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*/
}
...