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

Question

[Alma410]

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

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

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