css - 将 ReactCSSTransitionGroup 与样式组件一起使用

Question

我正在使用 styled-components而不是传统的CSS方式。但我不知道它如何与 ReactCSSTransitionGroup 一起工作.

基本上，ReactCSSTransitionGroup 在 css 资源中寻找特定的类名，然后在组件的整个生命周期中应用。但是，对于 styled-components，没有任何类名，样式直接应用于组件。

我知道我可以选择不使用 ReactCSSTransitionGroup，因为这两种技术看起来不兼容。但是当我只使用 styled-components 时，似乎我无法在卸载组件时呈现任何动画 - 它是纯 css，无法访问组件的生命周期。

如有任何帮助或建议，我们将不胜感激。

Answer 1

我不想按照另一个答案中的建议使用 injectGlobal，因为我需要使每个组件的转换不同。

事实证明这很简单 - 只需将过渡类嵌套在组件的样式中即可:

import React from "react";
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import styled from 'styled-components';

const appearDuration = 500;
const transitionName = `example`;

const Container = styled.section`
        font-size: 1.5em;
        padding: 0;
        margin: 0;

        &.${transitionName}-appear {
            opacity: 0.01;
        }

        &.${transitionName}-appear-active {
            opacity: 1;
            transition: opacity ${appearDuration}ms ease-out;
        }`;

export default () => {

    return (
        <CSSTransitionGroup
            transitionName={transitionName}
            transitionAppear={true}
            transitionAppearTimeout={appearDuration}>
            <Container>
                This will have the appear transition applied!
            </Container>
        </CSSTransitionGroup>
    );
};

请注意，我使用的是较新的 CSSTransitionGroup，而不是 ReactCSSTransitionGroup，但它也应该适用。