CSS transitions

Atomico — это современная библиотека для создания веб-компонентов на JavaScript, которая позволяет управлять состояниями компонентов декларативно и эффективно. Одним из ключевых инструментов для управления визуальными эффектами является CSS transitions. Они позволяют плавно изменять свойства элементов при смене состояния, что делает интерфейсы более динамичными и отзывчивыми.

Подключение стилей и использование transitions

В Atomico стили компонента обычно задаются через функцию css. Для применения плавных переходов нужно использовать свойство transition в CSS. Пример базовой структуры:

import { c, css } from "atomico";

const buttonStyle = css`
    button {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    button:hover {
        background-color: #2980b9;
        transform: scale(1.05);
    }
`;

function Button() {
    return <button use={buttonStyle}>Нажми меня</button>;
}

export default c(Button);

Ключевые моменты:

  • transition позволяет задать свойства для плавного изменения, их длительность и функцию времени (ease, linear, ease-in-out).
  • Можно одновременно анимировать несколько свойств через запятую.
  • Использование :hover и других псевдоклассов в Atomico работает так же, как в обычном CSS.

Плавные изменения состояния через props

Atomico позволяет связывать состояние компонента с его стилями. Переходы могут реагировать на изменение пропсов, что упрощает создание интерактивных элементов.

import { c, useState, css } from "atomico";

const toggleStyle = css`
    div {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transition: background-color 0.5s, transform 0.5s;
    }

    div.active {
        background-color: #2ecc71;
        transform: rotate(45deg);
    }
`;

function ToggleBox() {
    const [active, setActive] = useState(false);

    return (
        <div
            class={active ? "active" : ""}
            use={toggleStyle}
            oncl ick={() => setActive(!active)}
        ></div>
    );
}

export default c(ToggleBox);

Особенности:

  • Изменение класса через состояние автоматически активирует CSS transitions.
  • Можно анимировать цвет, размер, положение и любые другие свойства, поддерживающие анимацию.

Комбинация transitions и анимации

Для более сложных эффектов transitions можно комбинировать с CSS @keyframes. Это позволяет задавать начальное и конечное состояния, а также промежуточные шаги.

const pulseStyle = css`
    div {
        width: 80px;
        height: 80px;
        background-color: #9b59b6;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    div.pulse {
        animation: pulse 1s infinite alternate;
    }

    @keyframes pulse {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.2);
        }
    }
`;

function PulseCircle() {
    const [pulse, setPulse] = useState(false);

    return (
        <div
            class={pulse ? "pulse" : ""}
            use={pulseStyle}
            oncl ick={() => setPulse(!pulse)}
        ></div>
    );
}

export default c(PulseCircle);

Заметки:

  • Transition управляет изменениями состояния напрямую, а keyframes создают циклические или сложные анимации.
  • В одном компоненте можно сочетать оба подхода для достижения выразительных эффектов.

Оптимизация переходов

Переходы могут влиять на производительность, особенно при изменении тяжелых свойств (например, width, height). Для высокой производительности рекомендуется:

  • Использовать свойства transform и opacity для анимации, они обрабатываются GPU.
  • Минимизировать количество одновременно анимируемых свойств.
  • Для сложных элементов использовать will-change для подготовки к изменениям:
div {
    will-change: transform, opacity;
}

Взаимодействие с Shadow DOM

Atomico использует Shadow DOM, что позволяет изолировать стили. CSS transitions применяются локально внутри компонента. Это значит, что стили переходов не будут конфликтовать с глобальными стилями страницы.

Пример:

const boxStyle = css`
    div {
        width: 150px;
        height: 150px;
        background-color: #f1c40f;
        transition: background-color 0.4s;
    }

    div.hovered {
        background-color: #e67e22;
    }
`;

function ShadowBox() {
    const [hovered, setHovered] = useState(false);

    return (
        <div
            class={hovered ? "hovered" : ""}
            use={boxStyle}
            onmouseo ver={() => setHovered(true)}
            onmouse out={() => setHovered(false)}
        ></div>
    );
}

export default c(ShadowBox);

Особенности Atomico и Shadow DOM:

  • Переходы работают корректно внутри Shadow DOM без необходимости глобальных стилей.
  • Псевдоклассы (:hover, :active) применяются как обычно.

Итоговые рекомендации по transitions в Atomico

  • Всегда использовать transition для плавного изменения визуальных свойств.
  • Предпочтение свойствам transform и opacity для производительности.
  • Состояния компонентов можно связывать с классами для динамических эффектов.
  • Комбинировать с keyframes для сложных анимаций.
  • Использовать will-change для подготовки тяжелых элементов к анимации.

Transitions в Atomico позволяют создавать отзывчивые, интерактивные компоненты с плавными визуальными эффектами, полностью изолированные внутри Shadow DOM и управляемые декларативно через состояние и пропсы.

Оглавление