Это способ пропустить анимацию css3 на показанном?

Question

Анимация всегда воспроизводится, когда элемент с дисплея: нет показанного состояния. Если я хочу стиль пользовательский флажок. Мне нужно только играть в анимацию, когда пользователь проверяет или снимает галочку.

input[type=checkbox] { opacity: 0; } // native checkbox hidden
input[type=checkbox] ~ .mycheck {
    animation: uncheck 300ms ease-out forwards; // play uncheck animate
}
input[type=checkbox]:checked ~ .mycheck {
    animation: check 300ms ease-out forwards; // play checked animate
}

Вопрос check а также uncheck не только играть, когда пользователь нажимает его. Это играет, когда страница загружается также. Или когда родительский элемент переключается на показанный. например, во вкладках начальной загрузки.

Я знаю, что JavaScript легко справится с этим. Но на самом деле эта проблема возникла из интересного проекта github https://github.com/FezVrasta/bootstrap-material-design/issues/48. Этот красавчик хочет реализовать дизайн материала Google от bootstrap3.

В настоящее время я могу придумать способ (не идеальный). когда :not(:hover) задавать animation-duration: 1ms;, Пусть анимация закончилась быстро. Но пользователь по-прежнему выглядит коротким Flickr.

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation-duration: 1ms;
}

Невозможно установить 0 мс. в противном случае animate не воспроизводится, пока пользователь не наведет курсор мыши.

Есть ли лучшие способы?

Answer 1

Вы можете использовать решение, о котором вы думали, с :not(:hover) и просто отмените анимацию с помощью:

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation: none;
}

или, и я думаю, что это лучшее решение здесь, не используйте анимацию, а вместо этого используйте переходы. Это может привести к чему-то вроде этого (при условии, что вы анимируете прозрачность):

input[type=checkbox] ~ .mycheck {
    opacity: 0;
    transition: opacity .3s ease-out;
}

input[type=checkbox]:checked ~ .mycheck {
    opacity: 1;
}

Кроме того, в зависимости от поддержки браузеров, которую вы хотите достичь, обратите внимание на префиксы поставщиков, так как Chrome только недавно удалил их в свойстве перехода.

РЕДАКТИРОВАТЬ: после некоторого тестирования, я пришел к мысли, используя только :focus псевдокласса должно быть достаточно:

input[type=checkbox]:focus ~ .mycheck {
    animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus:checked ~ .mycheck {
    animation: check 300ms ease-out forwards;
}

Единственный недостаток, который я вижу, это когда флажок теряет фокус, анимация может быть отменена