React-transition-group 之单组件过渡动画

本文介绍如何在React中使用`react-transition-group`实现单个组件的过渡动画,通过高阶组件(HOC)进行封装,简化代码并提高可读性。文章详细阐述了需求、实现方法,并提供了代码示例,强调了在组件内部使用过渡动画时的注意事项,包括设置`appear={true}`以及所需添加的样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概述:

在react开发的过程中,有时候需要给特定的页面或组件单独加上过渡动画,特别是给某个路由页面增加动画的时候,需要在页面组件中添加比较多的操作,并且每次需要添加动画的时候都要写一遍,实在比较麻烦,同时也增加了代码量和可读性,出于这个理由,把单组件过渡进行封装显的非常必要,在这里,采用了HOC的形式

需求:

  1. 单个组件进入和离开时需要动画
  2. HOC应该给包裹过的组件添加一个prop 用于退出组件

废话不多说,直接上代码

先看使用方法

import React, { Component } from 'react';
import { withSingleTransition } from "../../../components/withTransition/with-single-transition/with-single-transition";

@withSingleTransition('page', 300)
class page extends Component {

  goBack = () => {
    this.props.goBack().then(() => do something)
    //  注意 如果过渡的是路由,需要在then里显式的调用push 或 goBack方法,否则路由不会卸载
    // this.props.goBack().then(() => this.props.history.goBack())
  };
  .....
  .....
}

import React from 'react';
import {CSSTransition} from 'react-transition-group';

export function withSingleTransition(classNames = 'page', timeout = 500) {
  return function(WrappedComponent) {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值