(REACT)使用CSS模块的CSSTransition

编程基础网前端问题

2022-01-01

(React) CSSTransition with css modules((REACT)使用CSS模块的CSSTransition)

本文介绍了(REACT)使用CSS模块的CSSTransition的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的项目中实现到模型的CSSTransition。问题是我使用的是CSS模块。

我的模式的呈现方法

render() {
        return (
            <Aux>
                <Backdrop
                    show={this.props.show}
                    clicked={this.props.modalClosed}/>
                <CSSTransition
                    in={this.props.show}
                    timeout={1000}
                    mountOnEnter
                    unmountOnExit
                    classNames={?}
                >
                    <div
                        className={classes.Modal}
                    >
                        {this.props.children}
                    </div>
                </CSSTransition>
            </Aux>
        )
    }

我的Modal.css

    .fade-enter {

    }

    .fade-enter-active {
        animation:openModal 0.4s ease-out forwards;
    }

    .fade-exit{

    }

    .fade-exit-active{
        animation: closeModal 0.4s ease-out forwards;
    }

为了使CSSTransition组件正常工作，我应该向CSSTransition组件中的classNames属性传递什么？

推荐答案

jsx：

  <CSSTransition in={focused} timeout={500} classNames={{
    enterActive: styles.MyClassEnterActive,
    enterDone: styles.MyClassEnterDone,
    exitActive: styles.MyClassExit,
    exitDone: styles.MyClassExitActive
  }}>
    <span className={styles.MyClass}>animated</span>
  </CSSTransition>

CSS模块：

.MyClass {
  position: absolute;
  left: 5px;
}
.MyClassEnterActive {
  left: 15px;
  transition: left 500ms;
}
.MyClassEnterDone {
  left: 15px;
}
.MyClassExit {
  left: 15px;
}
.MyClassExitActive {
  left: 5px;
  transition: left 500ms;
}

谢谢Lionel！

这篇关于(REACT)使用CSS模块的CSSTransition的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react