Как добиться срабатывания transition для checkbox?

Question

[Alma410]

Приветствую. Реализован кастомный checkbox и для него предусмотрен маркер через background.
Проблема состоит в том, для маркера checkbox навешен transition для плавного появления. Но он не срабатывает. Как добиться срабатывния transition для плавного появления маркера при активации (клике) на checkbox

Ссылка на верстку

Comments

[Ankhena]

Если что, радио и чекбоксы можно стилизовать напрямую. А также их псевдоэлементы. Если добавить appearance: none

[ProjectSoft]

Два варианта
https://embed.plnkr.co/plunk/y7ccEgEGrIfSzXj6

PS:
Ещё можно заморочиться. Делал очень давно. Чуть подправил.

Answer 1

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

Просто повесь все необходимые стили сразу и добавить opacity: 0, а в активном состоянии меняй на opacity: 1

Comments

[Alma410]

Приветствую.
По поводу opacity: перед этим пробовал, то при таком подходе ставал невидимым border повешеный на before.
Но вы обое таким образом натолкнули меня на мысль или это имели ввиду: взял через position: absolute; :before навесил border, а на ::after навесил маркер (background), задав ему opacity: 0;
В результате при :checked для него opacity: 1;

Как результат сейчас при заданом transition: all .2s ease-in;

Answer 2

[Aleksey Solovyev]

Потому что не задали изначальное состояние для background-image. например пустое изображение:

.newsletter__label::before {
  transition: background .2s ease-in;
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid #3a173c;
  margin-bottom: .875rem;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
}

Но лучше делать через opacity или scale3d

Comments

[Alma410]

Приветствую.
По поводу opacity: перед этим пробовал, то при таком подходе ставал невидимым border повешеный на before.
Но вы обое таким образом натолкнули меня на мысль или это имели ввиду: взял через position: absolute; :before навесил border, а на ::after навесил маркер (background), задав ему opacity: 0;
В результате при :checked для него opacity: 1;

Как результат сейчас при заданом transition: all .2s ease-in;

Если позволите есть небольшие уточнения:
1. Как вы получили background-image:?
2. Почему у него такое поведенния при клике на него и он полностью не прячится за border

[Aleksey Solovyev]

Alma410,
1. Берете любую картинку и через любой online конвертер прогоняете. После для css добавляете data:image/png;base64, вначале, чтобы правильно определялось
2. Это я картинку взял с линией - поправил в ответе, заменил на полностью прозрачную пнгешку (можно тут сгенерировать https://png-pixel.com под любой цвет). Теперь не видно.

По поводу opacity: перед этим пробовал

А вот это вы правильно переделали. Всегда лучше использовать opacity и transition, которые более производительны. Только можно было бы обойтись одним псевдоэлементов:
- для label задать border
- для ::after задать картинку/иконку
- ::after анимировать через opacity

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

background-image не анимируется, то что в хром как-то пытается в анимацию, это фишка хрома, в мазиле например такое работать не будет.

Answer 3

[ImagineTables]

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}