Начало статьи.
Эффект наведения № 2
Нам нужен более сложный переход для этого эффекта. Давайте посмотрим на пошаговую иллюстрацию, чтобы понять, что происходит.
Сначала у нас есть переход background-position, за которым следует переход background-size. Переведем это в код:
Обратите внимание на использование двух значений перехода. При наведении нам нужно сначала изменить положение, а затем размер, поэтому мы добавляем задержку к размеру. При выходе мыши делаем обратное.
Теперь возникает вопрос: какие значения мы используем для background-position? Мы оставили эти поля пустыми выше. Значения background-size тривиальны, но значения для background-size — нет. И если мы сохраним фактическую конфигурацию, мы не сможем переместить наш градиент.
Наш градиент имеет ширину, равную 100%, поэтому мы не можем использовать процентные значения для background-position для его перемещения.
Процентные значения, используемые с background-position, всегда доставляют неудобства, особенно когда вы используете их впервые. Их поведение не интуитивно понятно, но четко определено и легко понятно, если мы понимаем логику, стоящую за ним. Я думаю, что для полного объяснения того, почему это работает, потребуется еще одна статья, но вот еще одно «длинное» объяснение, которое я разместил на Stack Overflow. Я рекомендую потратить несколько минут, чтобы прочитать этот ответ, и вы поблагодарите меня позже!
Хитрость заключается в том, чтобы изменить ширину на значение, отличное от 100%. Возьмем 200%. Нас не беспокоит фон, выходящий за пределы элемента, потому что переполнение в любом случае скрыто.
И вот что мы получаем.
Пришло время оптимизировать наш код. Если мы возьмем идеи, которые мы узнали из первого эффекта наведения, мы можем использовать сокращенные свойства и писать меньше объявлений, чтобы это работало:
Мы добавляем все свойства фона вместе, используя сокращенную версию, а затем используем --p для выражения наших значений. Размеры меняются от 0,08 em до 100 %, а положение — от 200 % до 100 %.
Я также использую другую переменную --t для оптимизации свойства перехода. При наведении мыши мы устанавливаем значение .3s, что дает нам это:
При выходе мыши --t не определено, поэтому будет использоваться резервное значение:
Разве у нас не должно быть background-size в переходе?
Это действительно еще одна оптимизация, которую мы можем сделать. Если мы не указываем какое-либо свойство, это означает «все» свойства, поэтому переход определяется для «всех» свойств (включая background-size и background-position). Затем он снова определяется для background-position, что аналогично определению для background-size, а затем для background-position.
«Подобное» — это не то же самое, что сказать что-то «такое же». Вы увидите разницу, если измените больше свойств при наведении курсора, поэтому в некоторых случаях последняя оптимизация может оказаться неподходящей.
Можем ли мы по-прежнему оптимизировать код и использовать только одно пользовательское свойство?
Да мы можем! Ана Тюдор поделилась отличной статьей, объясняющей, как создать переключение, когда одно пользовательское свойство может обновлять несколько свойств. Я не буду здесь вдаваться в подробности, но наш код можно изменить следующим образом:
Пользовательское свойство --i изначально не определено, поэтому используется резервное значение 0. Однако при наведении мы заменяем 0 на 1. Вы можете выполнить математику для обоих случаев и получить значения для каждого из них. Вы можете видеть эту переменную как «переключатель», который сразу обновляет все наши значения при наведении.
Опять же, мы вернулись только к трем объявлениям для довольно крутого эффекта наведения!
Продолжение статьи вскоре выйдет. Читайте перевод на канале WebTutorials в дзене.
Прочесть оригинальную статью можно по ссылке.
