主页 / 问题 / 1475738
Accepted
Салават
Asked:2022-12-09 22:04:16 +0800 CST2022-12-09 22:04:16 +0800 CST

如何让方块顺利出现和消失？

  • 772

我写了一段代码，当按下按钮时，元素平滑地退出屏幕边缘：

CSS

.direct-chat {
            display: none;
            position: fixed;
            bottom: 5px;
            right: 5px;
            max-width: 320px;
            z-index: 2;
            transform: translateX(0);
            animation: ani 0.5s ease;
        }

        @keyframes ani {
            0% {transform: translateX(100%);}
            100% {transform: translateX(0);}
        }

网页格式

<a href="#" class="dialog">Перейти к диалогу</a>
<div class="card card-primary card-outline direct-chat direct-chat-primary" id="chatWithAdmin">
...
<button type="button" class="btn btn-tool close_btn">
    <i class="fas fa-times"></i>
</button>
...
</div>

JavaScript

$(document).ready(function () {
            var Modal = document.getElementById('chatWithAdmin');
            var dialog_link = document.querySelector('.dialog');
            var close_info = document.getElementsByClassName('close_btn')[0];

            dialog_link.onclick = function () {
                Modal.style.display = "block";
            }

            close_info.onclick = function ()
            {
                setTimeout(function () {Modal.style.display = "none"}, 500);

            }
        });

我做了一些事情来使外观平滑，但是如何使它在您单击十字（close_btn类）时，它也平滑地返回屏幕并获得“显示：无”样式？

javascript

1 个回答

  1. Best Answer

    最简单的实现方式，昏昏欲睡的脑袋）

    var modal = document.querySelector('.modal');

function ModalAnim(type) {
  if(type === 'show') {
    modal.addEventListener('animationend', function() {
      modal.classList.add('modal--show');
      modal.classList.remove('modal--anim-show');
    });
    modal.classList.add('modal--anim-show');
  } else if(type === 'hide') {
    modal.addEventListener('animationend', function() {
      modal.classList.remove('modal--show');
      modal.classList.remove('modal--anim-hide');
    });
    modal.classList.add('modal--anim-hide');
  }
}
    .modal {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .8);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.modal--show {
  display: flex;
}

.modal .content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  background: #fff;
}

.modal--anim-show {
  display: flex;
  animation: modal-show 1s linear forwards;
  pointer-events: none;
}

.modal--anim-hide {
  animation: modal-hide 1s linear forwards;
  pointer-events: none;
}

@keyframes modal-show {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes modal-hide {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
    <input type="button" value="show" onclick="ModalAnim('show')">

<div class="modal">
  <div class="content">
    <input type="button" value="hide" onclick="ModalAnim('hide')">
  </div>
</div>

    • 1

相关问题