我用状态变量设置了MUI Box对象的高度，它工作得很好:状态一旦改变，大小就会相应改变.
现在我想对高度进行平稳过渡.我根据重命令设置了一个CSS文件，并在Box上使用了一个className.
CSS样式正在发挥作用("背景 colored颜色 "已被充分应用). 但是:从未发生过转变.高度如前所述变化，瞬间发生.
我try 过很多变通方法:在Box或sx的风格中定义过渡，但它也不起作用.
我甚至try 使用react-transition-group，但结果仍然是一样的:一切都工作得很完美，Box格式发生了变化，但转换不会发生，一切都是瞬间的.
帮助:)
我的代码:
import "./style.css"
(...)
function VisibleSpotsFeedBox() {
return(
<Box
className='mypaperclass'
sx={{
display : "flex",
flexDirection : "column",
position:"fixed",
bottom: { xs:55, sm:65, md:65},
left : 0,
right : 0,
borderTopLeftRadius : 20,
borderTopRightRadius : 20,
height: (visibleSpotsState.displayFeed ? 300-(touchPosition.current - touchPosition.start) : 50-(touchPosition.current - touchPosition.start))
}}
>
(...)
</Box>
)
}
Css:以下内容:
.mypaperclass {
background-color : #9ACD32;
transition: height 3s linear;
}