使用 Vanilla CSS 和样式化组件 React 组件渲染转换

分享于2022年07月17日 css css-transitions javascript reactjs styled-components 问答
【问题标题】:使用 Vanilla CSS 和样式化组件 React 组件渲染转换(React Component Render Transitions with Vanilla CSS & Styled Components)
【发布时间】:2022-01-27 08:51:06
【问题描述】:

每当我使用 vanilla CSS(在样式化组件中)渲染 React 组件时,我正在尝试找出一种添加过渡的方法。我知道有一个叫做 React Transition Group 的依赖,但我希望尽可能地避免依赖。

我想在我的移动侧边菜单中添加一个垂直显示过渡,当点击汉堡图标时它会向下展开。

这是我迄今为止的一个例子: Menu Picture


【解决方案1】:

您可以根据状态值在样式属性中设置菜单的高度,并为您的样式化组件添加过渡时间。

const Menu = styled.div`
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  transition: 300ms;
  overflow: hidden;
  height: 100px;
`

function NavBar(_props) {

  const [showMenu, setShowMenu] = useState(false)

  return (
    
); }

  • 谢谢!那行得通。我忘了包括溢出部分。