Web动效在Web应用中所起的作用就不说了。有人说，Web动效可以给Web起到锦上添花效果，也有人说，Web动效可以增加用户的粘性和吸引力。就目前来说，在Vue框架体系下，可以使用<transition>组件来构建Web动画效果，其实在React体系下，也可以使用类似的方式来给Web元素添加动画效果。接下来，就和大家一起探讨，在React框架如何将CSS的trasition和animation运用到元素中，让Web元素动起来。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

React构建的组件运用动效时常碰到的问题

不知道你是否像我一样，在使用React构建的组件，在添加动效的时候，总是和自己期望的有所差异。比如说，构建一个弹窗，弹窗出来的时候有动效，弹窗移除的时候没有动效。就像下面这样的一个效果：

你可能已经发现了，弹窗窗现的时候，会有一个fadeIn效果，但弹窗移除时并看不到fadeOut效果。这主要是因为，弹窗移除时，整个弹窗的DOM直接就删除了，因此也没有机会让你能看到fadeOut效果。那么在React构建的应用中，如何来改善这一点呢？这也是接下来要和大家一起探讨的话题。

使用react-transition-group给React组件添加动效

在Vue框架中提供了<transition>组件，在不同的生命周期中添加相应的类名，并在相应的类名中设置样式，从而给Vue组件添加动效：

在React中，我们可以使用一个类似Vue的<transition>组件，即 react-transition-group 可以给React组件添加动画效果。

react-transition-group提供了四个组件，<Transition>、<CSSTransition>、<SwitchTransition>和<TransitionGroup>。比如下面这个示例，就是采用<CSSTransition>组件构建的一个带有动效的组件：

// src/index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Container, Button, Alert } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';

import './styles.css';

function ModalComponent() {
    const [showButton, setShowButton] = useState(true);
    const [showMessage, setShowMessage] = useState(false);
    return (
        <Container style={{ paddingTop: '2rem' }}>
            {showButton && (
                <Button
                onClick={() => setShowMessage(true)}
                size="lg"
                >
                Show Message
                </Button>
            )}
            <CSSTransition
                in={showMessage}
                timeout={300}
                classNames="alert"
                unmountOnExit
                onEnter={() => setShowButton(false)}
                onExited={() => setShowButton(true)}
            >
                <Alert
                variant="primary"
                dismissible
                onClose={() => setShowMessage(false)}
                >
                    <Alert.Heading>
                        Animated alert message
                    </Alert.Heading>
                    <p>
                        This alert message is being transitioned in and
                        out of the DOM.
                    </p>
                    <Button onClick={() => setShowMessage(false)}>
                        Close
                    </Button>
                </Alert>
            </CSSTransition>
        </Container>
    );
}

ReactDOM.render(
    <ModalComponent />,
    document.getElementById('root')
);