Transition миксин БЭМ-элемента

css :hover presudo-class

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

Пример

Элемент, не реагирующий на наведение мыши

Элемент, реагирующий на наведение мыши

Когда приходится верстать много и быстро возникает необходимость оптимизировать время на разработку. Сегодня мы оптимизируем изменение свойств элементов БЭМ-блока при его различных состояниях (:hover, :focus, .is-active и т.д.).



Итак, разберем пример нашего интерактивного БЭМ-блока. Примем во внимание, что он достаточно условный. Вот итоговый SCSS, необходимый для подобной реакции элемента на наведение мышью:

В результате мы получаем нижележащий CSS. Результат его работы мы и видим в браузере.

Во избежание возможных ошибок и рутинности с проставлением свойств «transition», а так же «:hover» и подобных состояний, нам необходим миксин, позволяющий:

  • Передавать пары «свойство: его значение в момент наведения»;
  • Иметь возможность устанавливать свойства «transition-duration» и «transition-easing» для каждого свойства индивидуально;
  • Иметь возможность ссылаться на сам элемент, его псевдо-элементы, а так же на дочерние элементы;
  • Иметь возможность группировать одинаковый набор свойств для нескольких элементов;
  • Иметь возможность легко и удобно изменять список состояний, которые применяют свойствам элементов переданные параметры.

В результате упорного мыслительного процесса получаем вот такой готовый к использованию миксин:

Миксин принимает 5 аргументов:

1. Селекторы, к которым будет добавлено свойство «transition».

Данный аргумент может являться либо строкой с селектором, либо массивом селекторов. Возможные селекторы:

  • «:self» — свойства будут изменяться у самого элемента;
  • псевдо-элементы;
  • любые дочерние элементы, которые наследуют класс родителя.

2. Карта свойств с их значениями в активном состоянии блока.

Если у нас нет необходимости менять значения свойств «transition-duration» или «transition-easing», можно передать необходимое значение свойства строкой:

В противном случае, мы передаём аргументы массивом:

3. Значение свойства «transition-duration», общее для всех переданных свойств.

4. Значение свойства «transition-easing», общее для всех переданных свойств.

5. Список состояний, к которым будут применены переданные свойства.

Например, если мы хотим получить визуальный отклик блока не только на событие «:hover», но, например, и на событие «:focus», либо на наличие у блока определенного класса, например, «.is-active», тогда значение аргумента должно быть: «:hover» «:focus» «.is-active».

А теперь применим миксин на нашем примере:

Используя миксин, нет необходимости прописывать свойство «transition» у дочерних элементов — необходимо указать только необходимые свойства и их измененные состояния, остальное всё сделает миксин.

Поставленная задача решена, время разработки сокращено. Всем удачи в работе!

Email this to someoneShare on VKShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedIn

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

97 − 90 =