单击反应中的按钮时从左侧滑动卡片

【问题标题】：Sliding card from left side when clicked on button in react单击反应中的按钮时从左侧滑动卡片
【发布时间】：2022-02-10 17:58:33
【问题描述】：

在图 1 中，当用户点击“Apply Coupen”时，一个窗口会从网页上方的左侧滑出（参见图 2）。如何做到这一点？在图 2 中，我们可以在从左侧滑动的窗口旁边的网页上看到蓝色透明色。如何实现呢？

图片 1

图片 2

【问题讨论】：

您想要的是使用 CSS 设置 <div> 的样式，使其隐藏，然后在单击同一 <div> 时应用新样式。像这样davidwalsh.name/css-slide

标签： javascript html css reactjs

【解决方案1】：

看到它。 Click here and see demo code 如果这对您有帮助，请标记为答案；

import { useState } from 'react'
import "./styles.css";
import Sidebar from './component/sidebar'


export default function App() {
  const [toggle, setToggle] = useState(false);

  const handleToggle = () => {
    setToggle(pre => !pre)
  }

  return (
    <div className="App">
      <button onClick={handleToggle} >Click Me</button>
     {toggle && <Sidebar close={() => setToggle(false)} />}
    </div>
  );
}

【讨论】：

我希望侧边栏在单击按钮时从左向右滑动。
要实现它，您可以使用 framer-motion 或 react-spring 这些库与动画和过渡相关。