原生js实现弹窗消息动画

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

简介

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

需要的技术栈

• HTML
• CSS
• JavaScript

实现步骤

1. 创建HTML结构

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

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

1. 设置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的缓动函数。

1. 编写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键时，隐藏动画会触发。

示例

这里提供两个对应上面示例代码的演示链接，分别演示了通过函数调用和事件监听绑定的方式展示和隐藏弹窗消息。

• 函数调用方式的演示链接
• 事件监听绑定方式的演示链接

参考文献：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript