Задать вопрос
@Alma410

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

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

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

672654f377a29351756611.png
  • Вопрос задан
  • 100 просмотров
Подписаться 1 Простой 2 комментария
Решения вопроса 2
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Просто повесь все необходимые стили сразу и добавить opacity: 0, а в активном состоянии меняй на opacity: 1
Ответ написан
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
Потому что не задали изначальное состояние для 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы