CSSTransition¶

Компонент перехода, созданный на основе замечательной библиотеки ng-animate. Его следует использовать, если вы используете CSS-переходы или анимацию. Он создан на основе компонента Transition, поэтому наследует все его пропсы.

CSSTransition применяет пару имен классов во время состояний appear, enter и exit перехода. Применяется первый класс, а затем второй класс *-active, чтобы активировать CSS-переход. После перехода применяются соответствующие имена классов *-done, чтобы сохранить состояние перехода.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function App() {
    const [inProp, setInProp] = useState(false);
    const nodeRef = useRef(null);
    return (
        <div>
            <CSSTransition
                nodeRef={nodeRef}
                in={inProp}
                timeout={200}
                classNames="my-node"
            >
                <div ref={nodeRef}>
                    {"I'll receive my-node-* classes"}
                </div>
            </CSSTransition>
            <button
                type="button"
                onClick={() => setInProp(true)}
            >
                Click to Enter
            </button>
        </div>
    );
}

Когда параметр in установлен в true, дочерний компонент сначала получит класс example-enter, затем example-enter-active будет добавлен в следующем тике. CSSTransition заставляет переливаться между перед добавлением example-enter-active. Это важный прием, поскольку он позволяет нам осуществить переход между example-enter и example-enter-active, даже если они были добавлены сразу же друг за другом. Более того, именно это позволяет нам анимировать появление.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.my-node-enter {
    opacity: 0;
}
.my-node-enter-active {
    opacity: 1;
    transition: opacity 200ms;
}
.my-node-exit {
    opacity: 1;
}
.my-node-exit-active {
    opacity: 0;
    transition: opacity 200ms;
}

Классы *-active представляют стили, к которым вы хотите анимировать, поэтому важно добавить объявление transition только к ним, иначе переходы могут вести себя не так, как задумано! Это может быть неочевидно, когда переходы симметричны, т. е. когда *-enter-active является тем же самым, что и *-exit, как в примере выше (минус transition), но это становится очевидным при более сложных переходах.

Пример¶

Свойства¶

Принимает все пропсы из <Transition>, если не указано иное.

classNames¶

Имена классов анимации, применяемые к компоненту при его появлении, входе, выходе или завершении перехода. Можно указать одно имя, которое будет иметь суффикс для каждого этапа, например, применяется classNames="fade":

• fade-appear, fade-appear-active, fade-appear-done
• fade-enter, fade-enter-active, fade-enter-done
• fade-exit, fade-exit-active, fade-exit-done

Следует отметить несколько деталей о том, как применяются эти классы:

1. Они соединяются с теми, которые уже определены для дочернего компонента, поэтому если вы хотите добавить некоторые базовые стили, вы можете использовать className, не беспокоясь о том, что он будет переопределен.
2. Если компонент перехода монтируется с in={false}, то никакие классы еще не применяются. Возможно, вы ожидаете *-exit-done, но если подумать, компонент не может завершить выход, если он еще не вошел.
3. Классы fade-appear-done и fade-enter-done будут обоими применены. Это позволяет вам определить разное поведение для появления и обычного входа, используя селекторы типа .fade-enter-done:not(.fade-appear-done). Например, вы можете применить эпическую анимацию входа, когда элемент впервые появляется в DOM, используя Animate.css. В противном случае вы можете просто использовать fade-enter-done для определения обоих случаев.

Каждый отдельный classNames также может быть указан независимо, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}

Если вы хотите установить эти классы с помощью CSS Modules:

1

import styles from './styles.css';

возможно, вы захотите использовать camelCase в вашем CSS-файле, таким образом, вы сможете просто разнести их вместо того, чтобы перечислять их по одному:

1

classNames={{ ...styles }}

• type: string | { appear?: string, appearActive?: string, appearDone?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }
• default: ''

onEnter¶

Обратный вызов <Transition>, запускаемый сразу после применения класса enter или appear.

• type: Function(node: HtmlElement, isAppearing: bool)

onEntering¶

Обратный вызов <Transition>, запускаемый сразу после применения класса enter-active или appear-active.

• type: Function(node: HtmlElement, isAppearing: bool)

onEntered¶

Обратный вызов <Transition>, запускаемый сразу после того, как классы 'enter' или 'appear' удалены и класс done добавлен к узлу DOM.

• type: Function(node: HtmlElement, isAppearing: bool)

onExit¶

Обратный вызов <Transition>, выполняемый сразу после применения класса exit.

• type: Function(node: HtmlElement)

onExiting¶

Обратный вызов <Transition>, выполняемый сразу после применения exit-active.

• type: Function(node: HtmlElement)

onExited¶

Обратный вызов <Transition>, запускаемый сразу после того, как классы exit удалены и класс exit-done добавлен к узлу DOM.

• type: Function(node: HtmlElement)

Комментарии