Css &引用；出现；在CST中，转换不'；I don’我没有按预期工作

我想实现

cstranslation

来设置元素的动画，但仍然可以立即挂载它

根据：

默认情况下，无论in的值是多少，子组件在首次装载时都不会执行enter转换。如果需要此行为，请将“显示”和“中”都设置为true

所以我认为这个例子是可行的：

<CSSTransition
   in={showMessage}
   appear={showMessage}
   timeout={300}
   classNames="alert"
>

下面是一个代码沙盒：

---

正如您所看到的，它会立即显示出来。我需要把它藏起来，但还是装上去。如何执行此操作？

但是您没有设置

警报组件的
show
属性。因此，它是
真的

以下是如何在开始时隐藏它，然后显示和取消显示

代码：

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
从“react bootstrap”导入{容器、按钮、警报}；
从'react transition group'导入{CSTranslation}；
导入“./styles.css”；
函数示例（）{
const[showMessage，setShowMessage]=useState（false）；
useffect（（）=>{
设置超时（（）=>{
设置显示消息（true）；
}, 10000);
}, []);
返回(
setShowMessage（假）}
>
动画警报消息

此警报消息正在和中转换
从DOM中出来。

setShowMessage（错误）}>
接近
setShowMessage（真）}>
给我看
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);
您是否尝试过显示：无？对不起，这不是它。我需要立即安装该元件，但仍然不可见
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Container, Button, Alert } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';

import './styles.css';

function Example() {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setShowMessage(true);
    }, 10000);
  }, []);
  return (
    <Container style={{ paddingTop: '2rem' }}>
      <CSSTransition
        in={showMessage}
        exit={showMessage}
        appear={showMessage}
        timeout={300}
        classNames="alert"
      >
        <Alert
          variant="primary"
          dismissible
          show={showMessage}
          onClose={() => setShowMessage(false)}
        >
          <Alert.Heading>
            Animated alert message
          </Alert.Heading>
          <p>
            This alert message is being transitioned in and
            out of the DOM.
          </p>
          <Button onClick={() => setShowMessage(false)}>
            Close
          </Button>
        </Alert>
      </CSSTransition>
      <button onClick={() => setShowMessage(true)}>
        Show me
      </button>
    </Container>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);