@mosikus

Почему неправильно работает transition?

Есть такая кнопка:



.btn { 
	  opacity: 1;
	  transition: opacity 0s ease 1s;
    }
.btn:active {
	        opacity: 0;
	       	transition-delay: 0s;
    }


Всё работает. То есть при нажатии кнопка исчезает. Но если в .btn в атрибут transition поставить opacity 0.2s ease 1s; (0.2s) то начинаются проблемы. При нажатии кнопка не становится прозрачнее (обычное нажатие) или становится прозрачнее лишь наполовину и без задержки.



Особенно хорошо это проявляется на смартфоне: *Click*
  • Вопрос задан
  • 99 просмотров
Решения вопроса 3
lamer350
@lamer350
กำลังสูงสุด
Переделайте все это в animation через keyframe, приохотит это из за того что анимация у вас отрабатывает за 0.2s (200млс), а клик происходит за 10-50... В итоге :active перестает быть активным (как только вы отпускаете кнопку мыши) и анимация останавливается (и зависает на 1s так как вы указали это в transition).
Ответ написан
Get-Web
@Get-Web
Front-End Developer
Все правильно работает...
Псевдокласс :active действует только в момент когда вы жмете на элемент, до момента когда вы его не отпустите.
В первом примере у вас у вас transition-duration (Продолжительность перехода) равна 0 а задержка (transition-delay) равна 1 секунде, но в состоянии :active задержка рана 0. Поэтому в момент клика мы моментально делаем кнопку невидимой так как нет ни задержки ни продолжительности и после того как отпускаем, кнопка появляется через 1 секунду, потому что :active {transition-delay: 0s;} больше нет, а значит время задержки снова равно 1s и мы возвращаемся в исходное положение.

Второй пример работает так же, но transition-duration (Продолжительность перехода) у нас есть и вот сколько вы удерживали кнопку во время клика, на столько она успела стать прозрачной, после чего мы возвращаемся в обратное состояние через 1 секунду, поставьте transition-duration например 5 секунд и увидите что за один клик ничего не происходит, но чем дольше держим тем прозрачнее становится кнопка и начинает возвращаться в исходное положение через секунду


Отсюда вопрос: Какое поведение вы ожидаете?
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
С помощью javascript это можно сделать вот так:

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы