Рубрики
Без рубрики

CSS анимационный переключатель

Отражение, на котором подход к использованию для переключения анимации CSS. Один для каждого состояния? Или используя `нет ()` псевдо класс?

Автор оригинала: Cedric Poilly.

Эта статья была Первоначально Опубликовано на мой Веб-сайт .

Это работа в процессе, вы можете столкнуться с опечатками или хуже. – Читайте по своему страхому риску. 😄.

Используйте : нет () Псевдо-класс для альтернативного состояния. Переключить * - закрыто класс для переключения между состояниями.

.bottom-nav__list--closed {
    animation: close-nav 1s forwards;
}

.bottom-nav__list:not(.bottom-nav__list--closed) {
    animation: open-nav 1s forwards;
}

На мобильном представлении моего сайта у меня есть нижний навигационный помощник. Это облегчает прыжку через участки домашней страницы. Я хотел, чтобы это было анимировано как на открытии и закрытии.

В прошлом я попытался изменять класс CSS при переключении элемента UI, и никогда не был большим успехом. На этот раз у меня была идея использования : нет () селектор для того же. Оно работало завораживающе!

Мы могли бы подумать, что что-то подобное будет работать, т. Е. Добавление тесной анимации в базовый класс.

.bottom-nav__list {
    animation: open-nav 1s forwards;
}

Но это просто ничего не сделает. 🤷♂.

Плохая идея – попробовать переключение между классами, т. Е. - Расположение и а - закрыт класс.

Причина № 1 – в чем разница? 🤷♂.

Отказ от ответственности: 💯 самоуверенно. Это запутано. Позволь мне объяснить. При отладке кода в браузере вы увидите список классов Flash. Только Закрыть или открыть будет измениться.

Только четыре буквы изменились. Даже граф то же самое! 🤦♂.

Обратите внимание, что этот метод может быть одобрен по нескольким причинам.

  1. Это (или кажется) более удобно, чтобы более явные с двумя классами.
  2. Легче понять для начинающие не нужно знать : нет () селектор.
  3. Легче расширить: вы можете добавить еще одно состояние, следуя той же схеме.

Все, что говорится, вот простая причина, по которой я предпочитаю : нет () метод.

Причина № 2 – «Ничего» лучше

Я знаю, это так же, как причина # 1, мы просто представляем другую сторону. 🙄.

Смотрите код ниже для : нет () Метод: весь второй класс отсутствует!

ИМХО, это намного лучше: разница визуальная! 👀 Наглядно, я могу сказать, применяется ли класс модификатора или нет. У меня нет необходимости сжать мои глаза и упорно сосредоточиться, чтобы быть уверенным, какой класс применяется. – Да, я ленивый. Хороший разработчик ленивый в любом случае. Это профессиональная опасность. 🤷♂ (🙉)

Я собрал Codepen демонстрацию каждого подхода. Используя нет () Pseudo Class: https://codepen.io/cedpoilly/pen/jjynbkb Подключение модифицированных классов: https://codepen.io/cedpoilly/pen/xwmrnnz.

Вы были достаточно смелы, чтобы прочитать весь этот бла-бла (если вы не обманули – это Бааад, действительно плохо; хуже, что --Oped & - это метод . И у вас есть два способа переключаться между двумя анимациями CSS. 👏.

Теперь иди что-нибудь код.

…

Хорошо, иди сейчас.

…

До свидания!

…

Привет! Счастливое кодирование! ✌.

Читайте ещё по теме: