react hooks 点击从底部慢慢弹窗
时间: 2023-07-11 21:22:25 浏览: 78
要实现从底部弹出的弹窗,可以使用 React Hooks 和 CSS 动画实现。首先,在 React 组件中,使用 useState Hook 来保存弹窗是否显示的状态。然后,使用 CSS 中的 transform 属性,将弹窗从底部向上移动,实现弹出的效果。
以下是一个简单的代码示例:
```
import React, { useState } from 'react';
import './popup.css';
function Popup() {
const [visible, setVisible] = useState(false);
const togglePopup = () => {
setVisible(!visible);
}
return (
<div className="popup-container">
<button onClick={togglePopup}>点击打开弹窗</button>
{visible &&
<div className="popup">
这是一个弹窗!
</div>
}
</div>
);
}
export default Popup;
```
在 CSS 文件中,可以使用以下代码实现弹窗的样式:
```
.popup-container {
position: relative;
}
.popup {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transform: translateY(100%);
animation: popup 0.5s ease forwards;
}
@keyframes popup {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
```
这里的关键是动画效果的实现,使用了 CSS 的 animation 属性和 keyframes 规则,实现了从底部弹出的效果。