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

Question

[mosikus]

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

.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*

Answer 1

[lamer350]

Переделайте все это в animation через keyframe, приохотит это из за того что анимация у вас отрабатывает за 0.2s (200млс), а клик происходит за 10-50... В итоге :active перестает быть активным (как только вы отпускаете кнопку мыши) и анимация останавливается (и зависает на 1s так как вы указали это в transition).

Answer 2

[Виталий Першин]

Все правильно работает...
Псевдокласс :active действует только в момент когда вы жмете на элемент, до момента когда вы его не отпустите.
В первом примере у вас у вас transition-duration (Продолжительность перехода) равна 0 а задержка (transition-delay) равна 1 секунде, но в состоянии :active задержка рана 0. Поэтому в момент клика мы моментально делаем кнопку невидимой так как нет ни задержки ни продолжительности и после того как отпускаем, кнопка появляется через 1 секунду, потому что :active {transition-delay: 0s;} больше нет, а значит время задержки снова равно 1s и мы возвращаемся в исходное положение.

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


Отсюда вопрос: Какое поведение вы ожидаете?

Comments

[mosikus]

Спасибо за ответ. То есть, средствами css это не исправить ?

[Виталий Першин]

mosikus, А что именно вам нужно? Чтобы резко исчезло и плавно появилось? Тогда вот: