react弹窗从屏幕左侧滑进滑出效果的实现

xt_123456

已于 2022-03-31 11:21:18 修改

阅读量2.1k

点赞数

分类专栏： react 文章标签： react css

于 2022-03-31 11:20:20 首次发布

本文链接：https://blog.csdn.net/xt_123456/article/details/123866722

版权

react 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在React中实现弹窗从屏幕左侧滑入滑出的效果。通过控制state的visible属性，结合CSS的transform: translateX()实现动画过渡。点击按钮时，弹窗显示；关闭按钮时，弹窗隐藏。

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

react弹窗从屏幕左侧滑进滑出效果的实现

一、实现原理：
首先在页面上写一个弹窗，弹窗样式设置
transform: translateX(-80vw);
transition: all 0.3s;（代表动画执行时间为0.3s）
其中 -80vw 是弹窗自身的宽度，使用translateX使弹窗向左移动自身宽度的距离，实现弹窗的隐藏
当弹窗需要显示的时候
设置transform: translateX(0);
使弹窗向右移动自身的宽度，实现弹窗的显示

初次加载页面的时候设置state的visible为false，弹窗的css样式为
transform: translateX(-80vw);来隐藏弹窗

点击弹窗展示的按钮的时候设置state的visible为true，弹窗的css样式为：
transform: translateX(0);来展示弹窗
点击弹窗上的关闭弹窗按钮时候设置state的visible为false，弹窗的css样式为
transform: translateX(-80vw);来隐藏弹窗

二、代码实现

import React, { Component } from 'react'
import cs from './index.module.scss'

export default class App extends Component {
  state = {
    visible: false // 弹窗是否可见,默认不可见,点击按钮后弹窗出现
  }
  render() {
    return (
      <div className={cs.page}>
        <div className={cs.btn} onClick={this.onDialogOpen}>点击弹窗从左侧滑出</div>
        <div className={`${cs.dialog} ${this.state.visible ? cs.dialog_visible : ''}`}>
          <div className={cs.btn} onClick={this.onDialogClose}>点击弹窗向左侧滑入</div>
        </div>
      </div>
    )
  }
  onDialogOpen = () => {
    this.setState({ visible: true })
  }
  onDialogClose = () => {
    this.setState({ visible: false })
  }
}

css样式

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 20px;
  background: orange;
}

.dialog {
  width: 80vw;
  height: 100vh;
  position: absolute;
  background-color: yellow;
  top: 0;
  left: 0;
  transform: translateX(-80vw);
  transition: all 0.3s;
}

.dialog_visible {
  transform: translateX(0);
}