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

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

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

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

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


css css-transitions transitions
person Marcel    schedule 07.05.2011    source источник
comment
stackoverflow.com/questions/26607330/   -  person Uday Hiwarale    schedule 18.12.2015

Ответы (3)


arrow_upward
118
arrow_downward

Если вам нужны разные задержки перехода 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< /а>

person Marcel    schedule 25.01.2013
comment
проблема, которую я вижу в этом, заключается в том, что когда вы быстро отводите мышь, она застревает посередине, пока ваша задержка не исчезнет. - person apieceofbart; 14.11.2016
comment
@apieceofbart, вы можете обойти это, условно применив другой класс, который не устанавливает задержку перехода в прослушивателе ontransitionend - person Oleg Vaskevich; 21.03.2018
comment
@OlegVaskevich На самом деле у меня был похожий вопрос здесь: stackoverflow.com/questions/ 40594931/ Был дан прекрасный ответ :) - person apieceofbart; 23.03.2018

arrow_upward
14
arrow_downward

Вот упрощенный пример 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;
}
person Dan Manastireanu    schedule 07.05.2011
comment
Допустим, есть два элемента. При наведении я хочу, чтобы первый отображался перед вторым; затем, когда мышь уйдет, я хочу, чтобы сначала исчезла вторая, а затем исчезла первая. Может ли это получиться ... даже если это может работать - person Ben; 26.03.2012
comment
@Ben Задайте вопрос, и я посмотрю на него. Также покажите немного html. Я думаю, у вас должны быть разные анимации для каждого элемента. При наведении задержка анимации A должна быть меньше задержки B. При анимации без наведения она должна быть изменена. PS: я не эксперт в этом... Я просто возился, пока не заработало :) - person Dan Manastireanu; 27.03.2012

arrow_upward
3
arrow_downward 

/* 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" */
person Nebojša Ložnjaković    schedule 15.07.2016
comment
примечание о добавлении s к 0 очень важно. Я просто был укушен этим, но понял это. +1 - person Sgnl; 07.08.2017