Плавное появление элементов интерфейса с помощью CSS-анимации прозрачности уже стало обычной практикой. Но такой блок даже с полной прозрачностью перекрывает всё, что окажется под ним.
Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация
. В этом случае поможет смена значения у свойства visibility. Его, на ряду с другими свойствами, указываем в transition.
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.widget:hover .tooltip {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
При «затухании» блока значение visibility: hidden
применится с задержкой равной длительности анимации прозрачности. Без задержки блок будет скрыт мгновенно. Для фазы «появления» блока такой задержки наоборот не нужно. Блок должен получить видимость сразу и только после этого у него будет меняться прозрачность.
Обновление: В примере исправил «дрожание» блока, когда указатель движется около его нижней границы . Это приводило к тому, что указатель то уходил с блока, то вновь оказывался поверх него.
PS: Разумеется, названия CSS3 свойств transition и
transition-delay нужно указывать с браузерными префиксами.
Коментарии к заметке
Можно (с известными ограничениями http://caniuse.com/#search=pointer-events). Для
pointer-eventsбольше годятся задачи типа «белого градиента, накрывающего текст».Если увести курсор в каждом из примеров вниз, то исчезающий блок снова находит курсор и возвращается на место видимым. Стоило бы решить и эту проблему.
Это легко исправляется как раз выше названным свойством pointer-events . Вот ещё один пример с новой улучшенной кнопкой, тултип которой не страдает от «дрожания» указателя рядом с его нижним краем:
В стили добавил два правила:
Если использовать
pointer-events, то не получится перейти курсором в этотtooltip(чтобы выделить текст или перейти по ссылке в самом тултипе, например), но если этого и не требуется, то такого же эффекта со значительно большей поддержкой можно достичь, используя другую разметку и селектор+(http://caniuse.com/#feat=css-sel2) http://jsfiddle.net/65xm7/1/Так
pointer-events: noneназначается только в фазе «затухания». Предполагается, что с блоком в этот момент уже нельзя никак взаимодействовать, что выглядит вполне логично.Спасибо за пример. Он, разумеется, проще и надёжнее, но имеет совсем другое поведение.
Мерцание можно убрать с css
-webkit-backface-visibility: hidden;Вот еще пример с анимацией стрелки тултипа http://jsfiddle.net/iurevych/5bnA9
Данный пример использовал для открытия подпунктов меню. Нормально работает
Помог, спасибо