js遮罩动画

JavaScript 遮罩动画是一种常见的前端交互效果，通常用于在页面上显示一个半透明的覆盖层，以阻止用户与页面的其他部分进行交互，同时可能会包含一些动画效果来提升用户体验。

基础概念

遮罩层（Mask Layer）通常是一个绝对定位的 div 元素，其背景色为半透明黑色（或其他颜色），并且覆盖整个页面或特定区域。动画效果可以通过 CSS 或 JavaScript 来实现。

类型

静态遮罩：简单的半透明覆盖层。
动态遮罩：带有动画效果的遮罩层，如淡入淡出、滑动等。

应用场景

模态框（Modal）：在弹出对话框时使用遮罩层。
加载动画：在页面或数据加载时显示遮罩层。
表单验证：在用户提交表单前显示遮罩层以防止重复提交。

示例代码

以下是一个简单的静态遮罩层的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遮罩层示例</title>
<style>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保在最上层 */
  }
</style>
</head>
<body>

<button onclick="showMask()">显示遮罩层</button>
<div id="mask" class="mask"></div>

<script>
function showMask() {
  document.getElementById('mask').style.display = 'block';
}

function hideMask() {
  document.getElementById('mask').style.display = 'none';
}
</script>

</body>
</html>

动画效果

可以使用 CSS3 的 transition 或 animation 属性来实现动画效果。例如，淡入淡出的动画：

.mask {
  /* ... 其他样式 ... */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mask.active {
  opacity: 1;
}

然后在 JavaScript 中切换类名来触发动画：

function showMask() {
  var mask = document.getElementById('mask');
  mask.classList.add('active');
}

function hideMask() {
  var mask = document.getElementById('mask');
  mask.classList.remove('active');
}