zoukankan      html  css  js  c++  java
  • react 利用高阶组件给页面加上动画

    利用高阶组件给页面加上动画

    并不想让所有的路由都有动画效果,只是想对指定的页面有路由切换效果,可以利用高阶组件来完成。

    # 定义高阶组件

    import React, { Component } from 'react'

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

    import '../assets/animate.css'

     

    const withAnimation = Cmp => {

      return class extends Component {

        render() {

          return (

            <CSSTransition

              in={this.props.match !== null}

              timeout={600}

              classNames={{

                enter: 'animated',

                enterActive: 'fadeInDown',

                exit: 'animated',

                exitActive: 'fadeOutDown'

              }}

              unmountOnExit

            >

              <Cmp {...this.props} />

            </CSSTransition>

          )

        }

      }

    }

     

    export default withAnimation

     

    # 使用

    const Page = withAnimation(

      class Page extends Component {

     

        render() {

          return <div>高阶组件完成路由切换动画效果</div>

        }

      }

    )

     

     

    <Route path="/home" children={props => <Page {...props} />} />

    App.jsx文件

    高阶组件定义

    需要页面组件中使用高阶组件包裹

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    android NDK环境搭建
    Android 控制硬件加速hardwareAccelerated的说明
    如何使用ttf字体文件
    33 文件IO流(二)
    32 文件IO流(一)
    # 02 公共前缀问题
    01 对称匹配问题(总元素必为偶数个)
    31 包装类
    30 常用工具类(二)
    01.数组内容打印(String形式)
  • 原文地址:https://www.cnblogs.com/ht955/p/14922871.html
Copyright © 2011-2022 走看看