第一次渲染时没有显示反应弹簧过渡答案

【问题标题】：react-spring transition is not showing when first time rendering第一次渲染时没有显示反应弹簧过渡
【发布时间】：2021-09-15 18:01:37
【问题描述】：

我是第一次使用 React-spring。我正在尝试通过切换按钮在页面上的侧抽屉上使用转换挂钩。但是，当我单击该按钮时，没有动画，因为该侧抽屉会立即打开，但是如果我第二次单击，则侧抽屉会以动画方式关闭。而且，如果我在从 DOM 中删除该抽屉之前单击该按钮，则从左侧动画滑动就在那里。我无法弄清楚问题出在哪里。请帮帮我。谢谢。这是我的代码：

import React, { useState } from "react";
import { useTransition, animated, config } from "react-spring";


const Transform = (props) => {

  const myStyle = {
    position: "fixed",
    left: 0,
    top: 0,
    zIndex: 100,
    backgroundColor: "black",
  };

  const [drawerIsOpen, setDrawerState] = useState(false);


  const closeDrawerHandler = () => {
    setDrawerState((v) => !v);
  };

  const transition = useTransition(drawerIsOpen, {
    form: { transform: "translateX(-100%)", opacity: 0 },
    enter: { transform: "translateX(0%)", opacity: 1 },
    leave: { transform: "translateX(-100%)", opacity: 0 },
    config: { duration: 2000 },
    // config: config.molasses,
    // openDrawerHandler: () => setDrawerState(true),
  });

  return (
    <>
      {transition((style, item) =>
        item ? (
          <animated.aside
            className='bg-white h-100 w-70 shadow'
            style={{ ...style, ...myStyle }}
            onClick={closeDrawerHandler}
          >
            <nav className='h-100'>
              <h2>It's a Side Drawer</h2>
            </nav>
          </animated.aside>
        ) : (
          ""
        )
      )}


      <div className='d-flex justify-content-end'>
        <button className='btn btn-primary ' onClick={closeDrawerHandler}>
          Toggle Btn
        </button>
      </div>
    </>
  );
};

export default Transform;

Image of transition problem

【问题讨论】：

标签： reactjs css-transitions css-transforms react-spring

【解决方案1】：

我拼写错误。愚蠢的一个，我从 as form 拼写。这就是它发生的原因。

【讨论】：