Простая штука в css transitions, которую я не замечала

[Vashta Nerada]

Как сделать разные эффекты при наведении мыши и после ее убирания? Когда добавляем transition, например, к ссылке, то получаем одинаковый эффект в обе стороны.... Оказывается, проблема решается элементарно: transition, добавленный к самой ссылке, будет работать при убирании мыши ("mouseleave"), а добавленный к a:hover - при наведении мыши ("mouseenter")

Пример:

#thing {
padding: 10px;
border-radius: 5px;

/* HOVER OFF */
-webkit-transition: padding 2s;
}

#thing:hover {
padding: 20px;
border-radius: 15px;

/* HOVER ON */
-webkit-transition: border-radius 2s;
}

Спасибо Крису

Иллюстративное демо Криса

@темы: css, small useful things

Comments

[winterwolf]

Я бы не сказал, что свойство transition такое уж простое, но очень интересное.

О примере - это лишь обман зрения.
В одном свойстве мы анимируем все свойства, а в другом лишь rotate. Но это было бы заметно, если начальное и конечный градус поворота не равны и не кратны 360, просто обратный переход не заметем глазу.

Более интересная вещь анимировать свойства последовательно. К примеру, сначала увеличить высоту, а потом ширину - это будет при наведении, а обратный процесс, можно сделать по разному, убрать все свойства, убрать ширину, а потом высоту или наоборот.
А теперь задачка для мозга, на дневниках есть меню сверху - сделать так, чтобы менюшки исчезали плавно и появлялось плавно. (Свойство display - не анимируется. Пример можно посмотреть у меня на дневнике)

[Vashta Nerada]

winterwolf красиво =) Я меню делала с изменением opacity + различные варианты с line-height - тогда появляется эффект, как будто меню складывается. И еще была мысль изначально убирать меню под шапку, а при наведении мыши его из-под шапки плавненько так вывозить =)

[winterwolf]

Меняя line-height? Хм, выпадающие делал с min-height;

И еще была мысль изначально убирать меню под шапку, а при наведении мыши его из-под шапки плавненько

Изначально так сделал - но у ие (7-8) на этот счет свои счеты, так что это частичное решение. И убирать под шапку - свойство позиционирования - z-index не совсем тот эффект получается при анимировании его. (если менять с 1 на 2 или -1000 на 2)