html+css实现一个带遮罩层的滑动抽屉

最新推荐文章于 2024-06-21 09:56:36 发布

sakoooo

最新推荐文章于 2024-06-21 09:56:36 发布

阅读量1.7k

点赞数 2

分类专栏：前端 css

本文链接：https://blog.youkuaiyun.com/qq_33539213/article/details/106057995

版权

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文介绍了一个类似于Ant Design中Drawer组件的实现方法，通过React和CSS动画，创建了一个可以平滑关闭的侧边菜单，点击灰色遮罩层即可触发关闭动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果类似antd的Drawer，点击灰色遮罩层可以平滑关闭。
在这里插入图片描述

import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './test.less';

export default function() {
  const [v, setV] = useState(false);
  const [mask, setMask] = useState(false);
  return (
    <>
      <Button onClick={() => setV(!v)}>click me</Button>
      <div className={styles.container}>
        <aside
          className={styles.mask}
          style={{ display: v || mask ? 'flex' : 'none' }}
          onClick={() => setV(false)}
          onAnimationEnd={a => {
            if (a.animationName === styles.myMoveLeftOut) setMask(false);
            else if (a.animationName === styles.myMoveLeftIn) setMask(true);
          }}
        >
          <div
            className={v ? `${styles.menu} ${styles.myenter}` : `${styles.menu} ${styles.myleave}`}
          >
            menu....
          </div>
        </aside>
      </div>
    </>
  );
}

样式：

.container {
  background-color: antiquewhite;
  height: 80vh;
  transition: all 0.3s;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    .menu {
      width: 120px;
      background-color: green;
    }
    .myenter {
      animation: myMoveLeftIn 1s;
    }
    .myleave {
      animation: myMoveLeftOut 1s;
    }
  }
  @keyframes myMoveLeftIn {
    0% {
      transform: translateX(-100%);
      transform-origin: 0 0;
      opacity: 0;
    }
    100% {
      transform: translateX(0%);
      transform-origin: 0 0;
      opacity: 1;
    }
  }
  @keyframes myMoveLeftOut {
    0% {
      transform: translateX(0%);
      transform-origin: 0 0;
      opacity: 1;
    }
    100% {
      transform: translateX(-100%);
      transform-origin: 0 0;
      opacity: 0;
    }
  }
}