Разные CSS-переходы-задержки для наведения и мыши - PullRequest
Новая
       44

Разные CSS-переходы-задержки для наведения и мыши

45 голосов
/ 07 мая 2011

Можно ли использовать CSS3-переходы с другой задержкой переключения между состояниями?Например, я пытаюсь сделать элемент сразу выше при наведении курсора на мышку, чтобы подождать секунду, прежде чем вернуться к начальной высоте элемента.

Демонстрационная страница: jsfiddle.net / RTj9K (черный квадрат в правом верхнем углу)

CSS: #bar { transition:.4s ease-out 0, 1s; }

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

Ответы [ 3 ]

103 голосов
/ 25 января 2013

Если вы хотите использовать разные задержки CSS-перехода для hover и mouseout, вы должны установить их с помощью соответствующих селекторов. В приведенном ниже примере при наведении на элемент начальная задержка при наведении на 0, а на mouseout переход задерживается на 1s. 

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

Вы можете найти полный CSS в обновленной демонстрации моего вопроса ниже. Я использовал стенографию transition свойство, порядок значений: 

transition:<property> <duration> <timing-function> <delay>;

Демо-версия ответа: http://jsbin.com/lecuna/edit?html,css,output

12 голосов
/ 07 мая 2011

Вот упрощенный пример JSFiddle .В основном вам нужно свойство transition-delay: 

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}
3 голосов
/ 15 июля 2016 
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

Просто чтобы сказать, что это не сработает, если вы не введете символ 's' (в секундах), поэтому: 

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */
...