modal框的原生动画

前端、小老弟

已于 2024-01-05 17:32:07 修改

阅读量183

点赞数 1

文章标签： javascript 前端 html

于 2022-10-10 20:23:05 首次发布

本文链接：https://blog.csdn.net/Shiqi_777/article/details/127251570

版权

上代码！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100vh;
      }
      .btn {
        box-sizing: border-box;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid gray;
        cursor: pointer;
        position: fixed;
      }
      .btn:hover {
        background-color: #ccc;
      }
      .btn1 {
        left: 0;
        bottom: 0;
      }
      .btn2 {
        right: 0;
        bottom: 0;
      }
      .btn3 {
        right: 0;
        top: 0;
      }
      .model {
        position: absolute;
        background-color: red;
      }
      .ani {
        animation: modelAnimate 0.3s ease-out forwards;
      }
      .reani {
        animation: reModelAnimate 0.3s ease-out forwards;
      }
      @keyframes modelAnimate {
        0% {
          width: 0;
          height: 0;
          opacity: 0;
        }
        100% {
          width: 100px;
          height: 100px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 1;
        }
      }
      @keyframes reModelAnimate {
        0% {
          width: 100px;
          height: 100px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 1;
        }
        100% {
          width: 0;
          height: 0;
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <span class="btn">点击model动画</span>
      <span class="btn1 btn">点击model动画</span>
      <span class="btn2 btn">点击model动画</span>
      <span class="btn3 btn">点击model动画</span>
      <div class="model"></div>
    </div>
  </body>
  <script>
    let num = true
    const model = document.querySelector('.model')
    const fn = (e) => {
      if (num) {
        model.style.left = e.clientX + 'px'
        model.style.top = e.clientY + 'px'
        model.classList.remove('reani')
        model.classList.add('ani')
        num = false
      } else {
        model.style.left = e.clientX + 'px'
        model.style.top = e.clientY + 'px'
        model.classList.remove('ani')
        model.classList.add('reani')
        num = true
      }
    }

    ['.btn','.btn1','.btn2','.btn3'].forEach(item => {
      document.querySelector(item).addEventListener('click', fn)
    })
  </script>
</html>