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

xt_123456

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

阅读量1.9k

点赞数

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

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

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

版权

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