CSS 转换不适用于 React MUI 对象

Question

我使用状态变量设置 MUI Box 对象的高度，并且它完美地工作：一旦状态发生变化，大小就会相应变化。

现在我想要实现高度的平滑过渡。我已经根据建议设置了 CSS 文件，并在 Box 上使用了 className。

CSS 样式正常工作（“背景颜色”已完美应用）。 但是：没有发生任何转变。高度变化如以前一样，瞬时。

我尝试了很多解决方法：在 Box 样式或 sx 中定义过渡，但它也不起作用。

我什至尝试使用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;
  }

Answer 1

您是否尝试过使用关键帧而不是过渡？喜欢-

.mypaperclass {
    background-color : #9ACD32;
    animation: open 1000ms;
  }

@keyframes open {
  0% {
    height: 0px;
  }
}