使用React Hooks构建CSS的transition和animation

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Web动效在Web应用中所起的作用就不说了。有人说,Web动效可以给Web起到锦上添花效果,也有人说,Web动效可以增加用户的粘性和吸引力。就目前来说,在Vue框架体系下,可以使用<transition>组件来构建Web动画效果,其实在React体系下,也可以使用类似的方式来给Web元素添加动画效果。接下来,就和大家一起探讨,在React框架如何将CSS的trasitionanimation运用到元素中,让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')
);

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/react/applying-css-transitions-and-animations-with-react-hooks.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部