将ReactCSSTransitionGroup与样式组件一起使用

Question

我使用样式组件而不是传统的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';

export default () => {
    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;
        }`;


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

请注意,我使用的是较新的CSSTransitionGroup,而不是ReactCSSTransitionGroup,但它也适用于此.

Answer 2

Mike Goatly的方法很棒，但是我必须进行一些小的更改才能使其起作用。我更改了<CSSTransition>的道具，并使用一个函数作为其子项。

参见下面的组件示例，该组件根据状态变化淡入/淡出：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import styled from "styled-components";

const Box = styled.div`
  width: 300px;
  height: 300px;
  background: red;
  transition: opacity 0.3s;

  // enter from
  &.fade-enter {
    opacity: 0;
  }

  // enter to
  &.fade-enter-active {
    opacity: 1;
  }

  // exit from
  &.fade-exit {
    opacity: 1;
  }

  // exit to 
  &.fade-exit-active {
    opacity: 0;
  }
}`;

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      active: true
    };

    setInterval(() => this.setState({ active: !this.state.active }), 1000);
  }

  render() {
    return (
      <CSSTransition
        in={this.state.active}
        classNames="fade"
        timeout={300}
        unmountOnExit
      >
        {() => <Box />}
      </CSSTransition>
    );
  }
}