LINUX.ORG.RU

css animation

 ,


0

1

Я ННП. Дело такое. Как правильнее? Лезть и менять класс контейнера средствами JS (слушать event и ставить active) или делать анимацию средствами CSS и псевдоклассами (:hover, :active)?

Как пример: https://50projects50days.com/projects/rotating-navigation-animation/



Последнее исправление: shleemypants (всего исправлений: 3)

Лезть и менять класс контейнера средствами JS (слушать event и ставить active) или делать анимацию средствами CSS(:hover, :active)

От многого зависит. Если можете через КСС (псевдоклассы, кейфреймы) — лучше делайте так.

fernandos ★★★
()
Ответ на: комментарий от shleemypants

Можно обойтись без js, checkbox'ами и +, но выглядеть код будет не очень понятно и возможно придётся сильно изменить структуру html'я.

ddidwyll ★★★★
()
Ответ на: комментарий от shleemypants

Как правильнее? … средствами JS или … средствами CSS

Как удобнее и понятнее, так и правильнее.

По сцылке делается и то, и то — средствами JS навешивается нужный класс, а средствами CSS элементу с этим классом делается transform и анимация через transition.

Nervous ★★★★★
()
Ответ на: комментарий от shleemypants

HTML как раз самый, что ни на есть «по стандарту»

При чем тут стандарты, ты прочитал на что отвечаешь? Ну и использование чекбокса не в качестве инпута скорее хак, хотя и никак не запрещено.

ddidwyll ★★★★
()
Ответ на: комментарий от shleemypants

Вот я и спрашиваю, как правильнее?

Если необходимо полностью избавиться от js - делай чекбоксом, в противном случае удобнее менять класс js'ом, анимировать css'ом. Анимировать js'ом только если других вариантов совсем нет, что почти никогда.

ddidwyll ★★★★
()
Ответ на: комментарий от shleemypants

Ну посмотри в разметку той страницы что ты принёс. Там скрытый чекбокс и состояние которого меняется label'ом, от состояния чекбокса стилизуется само меню, через :checked и ~. Выглядит это плохо, но если нужно без js - то сойдёт.

ddidwyll ★★★★
()
Ответ на: комментарий от ddidwyll

Да, верно. И это плохо? Лучше изменять классы с помощью JS и DOM? (мы не говорим о фреймворках, просто чистый).

shleemypants
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.