反应 CSSTransition答案

【问题标题】：React CSSTransition反应 CSSTransition
【发布时间】：2021-12-31 21:30:00
【问题描述】：

我正在使用 CSSTransition 组创建侧抽屉，它工作正常，但打开和关闭抽屉的时间延迟非常快。

import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./SideDrawer.css";
const SideDrawer = (props) => {
  const content = (
    <CSSTransition
      in={props.show}
      timeout={300}
      classNames="let"
      unmountOnExit
      mountOnEnter
    >
      <aside className="sidedrawer" onClick={props.onClick}>
        {props.children}
      </aside>
    </CSSTransition>
  );
  return ReactDOM.createPortal(content, document.getElementById("drawer-hook"));
};

export default SideDrawer;

Sidedrawer.css

.sidedrawer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 62%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

【问题讨论】：

你能分享一下 SideDrawer.css 文件吗

标签： reactjs css-transitions transition sidebar react-transition-group

【解决方案1】：

您使用的 CSSTransition 的 classNames 错误。它为 CSS 转换的每个阶段提供了类，因此您可以使用它的类编写样式。这是正确的 CSS：

.let-enter {
  opacity: 0;
  transition: left 0.3s ease-in-out;
}

.let-enter-active {
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
}

.let-exit-active {
  transform: translate3d(-100%, 0px, 0px);
  visibility: visible;
  transition: all 0.5s ease 0s;
}

这里是来自CSSTransition源代码的解释：

/**
 * The animation `classNames` applied to the component as it enters or exits.
 * A single name can be provided and it will be suffixed for each stage: e.g.
 *
 * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
 * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
 *
 * Each individual classNames can also be specified independently like:
 *
 * ```js
 * classNames={{
 *   appear: 'my-appear',
 *   appearActive: 'my-appear-active',
 *   appearDone: 'my-appear-done',
 *   enter: 'my-enter',
 *   enterActive: 'my-enter-active',
 *   enterDone: 'my-enter-done',
 *   exit: 'my-exit',
 *   exitActive: 'my-exit-active',
 *   exitDone: 'my-exit-done'
 * }}
 * ```
 */

【讨论】：