Question

我有一个警报，每次加载页面时都会显示该警报，并且用户可以根据需要关闭警报。

现在，我想向警报添加结束过渡，但它似乎不起作用。

我尝试了很多事情，但对我的警报仍然没有过渡效果。

这是我的代码：

function ReactTip(props){
    if(props.display){
        return(
            <Bs.Fade in={props.display}>
                <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
                </div>
            </Bs.Fade>
        );
    }
    return null;
}

请注意，props.display的值为true。我的代码有什么问题？

更新＃1：我试过了，过渡工作正常，但div仍然存在，就像CSS显示设置为隐藏而不是没有显示一样。

return(
       <Bs.Fade in={props.display}>
           <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
           </div>
       </Bs.Fade>
);

Answer 1

我找不到使<Fade />工作的方法，所以我只使用了<Collapse />

这是我更新的代码：

<Bs.Collapse in={props.display}>
    <div>
         <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
            <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
         </Bs.Alert>
    </div>
</Bs.Collapse>

Answer 2

使用过渡prop transition={Fade}。

渐隐过渡不适用于React Bootstrap Alert组件

2 个答案: