CSSTransition 未被触发

Question

沙盒：https://codesandbox.io/s/practical-mountain-cjrte?file=/src/App.js

我第一次尝试使用 react-transition-group 中的 CSSTransition，但它不起作用:(

当我点击“了解更多”按钮时，我想显示组件“展开”（一个 div 块）并进行过渡。

到目前为止，我还没有得到任何类型的动画。我做错了什么？

我正在使用 react-transition-group 版本 4.4.2。

这是容器组件的摘录：

import { CSSTransition } from 'react-transition-group';
import './styles.scss'

const MyComponent = ()=>{
  const [toggled, setToggle] = useState(false)
const handleClick=()=> {
setToggle(prevState=> !prevState)
}
return (
  <div>
        {toggled?
          <TransparentButton onClick={handleClick}>
          back
          </TransparentButton>
        :<TransparentButton onClick={handleClick>
          learn more
        </TransparentButton>   
}

    {toggled&&
      <CSSTransition in={toggled} timeout={200} classNames="my-node">
        <Expanded />
      </CSSTransition> 
      }

  </div>
)

./styles.scss:

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 2000ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

感谢您的帮助！

Answer 1

几件事：

您不想有条件地装载 CSSTransition。所以去掉包裹它的{toggled&&。
向 CSSTransition 添加 unmountOnExit 属性。 CSSTransition 将为您处理卸载组件。

看看他们的例子：http://reactcommunity.org/react-transition-group/css-transition

这有点奇怪，因为他们网站上的 CodePen 与他们的示例不同。他们在 CodePen 中有 unmountOnExit，但在文档的书面部分中没有。

export default function App() {
  const [toggled, setToggle] = useState(false);
  const handleClick = () => {
    setToggle((prevState) => !prevState);
  };

  return (
    <div>
      {toggled ? (
        <button onClick={handleClick}>back</button>
      ) : (
        <button onClick={handleClick}>learn more</button>
      )}

        <CSSTransition in={toggled} timeout={200} classNames="my-node" unmountOnExit>
          <div> TEST!</div>
        </CSSTransition>
    </div>
  );
}

CSSTransition 未被触发

CSSTransition is not triggered

reactjs

reactcsstransitiongroup