滑到相应位置出现弹框

Hygge298

已于 2023-07-11 09:30:28 修改

阅读量51

点赞数

文章标签：前端

于 2023-07-11 09:06:49 首次发布

本文链接：https://blog.csdn.net/weixin_70270026/article/details/131652317

版权

滑到左下角会弹出一个框

实现代码块

css效果


.window{
    position: fixed;
    width: 3px;
    height: 100px;
    background-color: aqua;
    bottom: 0px;
}
.top{
    width: 200px;
    height: 300px;
    background-color: blue;
    position: absolute;
    bottom: 0px;
    animation: slide-inn 2.01s ease;
}
.topa{
    width: 200px;
    height: 300px;
    background-color: blue;
    position: absolute;
    bottom: 0px;
    left: -200px;
}
@keyframes slide-inn {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
.window-top{
    width: 200px;
    height: 300px;
    background-color: blue;
    position: absolute;
    bottom: 0px;
    /* left: -200px; */
    animation: slide-in 2s ease;
}
@keyframes slide-in {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

jsx代码

import React,{ useState} from 'react';
import './window.css'
export default function Window() {
    const [showPopup, setShowPopup] = useState(false);
    const [show,setShow]=useState(true)
    const handleMouseMove=()=>{
        setShowPopup(true)
    }
    const handleMouseLeave=()=>{
        setShow(false)
        setShowPopup(false)
        setTimeout(() => {
            setShow(true)
        }, 2000);
    }
    return (
        <div >         
            <div className={showPopup?'window-top':`${show?'topa':'top'}`} onMouseLeave={() => { handleMouseLeave() }}>hhh</div>
            <div onMouseMove={() => {handleMouseMove() }} className='window'></div>
        </div>
    );
}

字面解释–只可参考不详细

window的div指的是当鼠标浮动到指定位置时，会让上面的div状态改变为true
上面的div指的是默认情况下是不显示的，是false，当触发window中的onclick事件之后就会显示
当没有触发任何事件的时候，上面的div盒子是false不现实的状态，但是false中还有一个判断，是true状态，topa给的样式为将盒子隐藏了起来，当触发该盒子中的事件时候，下面盒子状态会变为false，上面false中对应的状态会为true