css - Material-UI 中的 AppBar 转换?

标签 css reactjs transition material-ui jss

是否可以在 Material-UI 中向 AppBar 元素添加过渡? 类属性似乎已正确完成,但仍然没有制作动画。我做错了什么?

查看此处的代码:CodeSandbox

在我的本地元素中,我提供了MuiThemeProvider,但是效果还是一样。

最佳答案

如果您将 appBar 样式更改为以下样式,这将起作用:

  appBar: {
    height: theme.spacing.unit * 8,
    "-moz-transition": "height 4s linear",
    "-webkit-transition": "height 4s linear",
    transition: "height 4s linear",
    "&:hover": {
      height: theme.spacing.unit * 16
    }
  }
  • 将转换值从数组更改为字符串。
  • 定义默认高度,以便过渡知道过渡到/从的高度。

关于css - Material-UI 中的 AppBar 转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52859988/

相关文章:

javascript - reactjs doc提到useEffect Hook 中的延迟事件,这是什么意思?

jquery - UI 的可排序列表的动画过渡

jquery - 具有不同高度的 slider 后内容更改位置的过渡

android - 带溢出的 DIV 不会在 Android 设备上滚动

JavaScript 调整

CSS:绝对定位伪元素丢失 z-index?

html - CSS 链接 :hover style only applies to the first instance even with using class

reactjs - 无法在 gatsby 入门博客中查询类型 "frontmatter"上的字段 "MarkdownRemark"

javascript - React 状态对象中的值发生奇怪的变化

SwiftUI:如何根据状态对象创建自定义 SwiftUI 转换?