原生js实现弹窗消息动画

2023年6月10日下午10:17 • JavaScript

下面是“原生js实现弹窗消息动画”的完整攻略：

简介

弹窗消息动画是网页中常见的提示形式，它通过出现和消失的动画效果，吸引用户的注意力，提示用户当前的操作状态或者重要的信息。在本文中，我们将介绍如何使用原生JS实现弹窗消息动画。

需要的技术栈

HTML
CSS
JavaScript

实现步骤

创建HTML结构

首先，我们需要在HTML中创建弹窗消息的结构。这里我们使用div元素作为弹窗消息的外层容器，然后在其中放置需要展示的信息。需要注意的是，我们需要通过CSS设置弹窗消息的初始样式，包括宽度、高度、背景色、边框等等。

<div class="notification">
  <p>这是一条弹窗消息</p>
</div>

设置CSS样式

接下来，我们需要设置弹窗消息的CSS样式。其中，我们可以设置外层容器的初始样式，以及展示和隐藏时的过渡效果。

.notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 100px;
  border: 1px solid #333;
  background-color: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.notification.show {
  opacity: 1;
}

.notification.hide {
  opacity: 0;
}

其中，我们使用了transition属性来添加过渡效果，展示和隐藏时的过渡时间分别设置为0.5秒，并且设置了ease-in-out的缓动函数。

编写JavaScript代码

最后，我们需要使用原生JS来实现弹窗消息的展示和隐藏动画。

function showMessage() {
  var notification = document.querySelector('.notification');
  notification.classList.add('show');

  setTimeout(function() {
    hideMessage();
  }, 3000);
}

function hideMessage() {
  var notification = document.querySelector('.notification');
  notification.classList.remove('show');
  notification.classList.add('hide');

  setTimeout(function() {
    notification.classList.remove('hide');
  }, 500);
}

在上面的代码中，我们定义了两个函数showMessage和hideMessage，分别用来展示和隐藏弹窗消息。在showMessage函数中，我们首先获取弹窗消息的元素，然后通过添加CSS的show类来实现动画展示。在展示完成后，我们使用setTimeout函数来延迟3秒钟，然后调用hideMessage函数来实现隐藏动画。

在hideMessage函数中，我们移除CSS的show类，并添加hide类来实现隐藏动画。等待动画完成后，再次移除hide类，以便下一次展示动画的准备。

使用事件监听绑定

除了通过函数调用，我们也可以通过事件监听来触发展示和隐藏动画，提高弹窗消息的可复用性。

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

notification.addEventListener('click', function() {
  showMessage();
});

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') hideMessage(); 
});

在上面的代码中，我们首先获取弹窗消息的元素，并通过添加监听器来监听鼠标的点击事件或者键盘的按键事件。当用户点击弹窗消息时，展示动画会触发；当用户按下键盘上的Esc键时，隐藏动画会触发。