layui自定义滑动弹窗动画-猿码集

1. 前言

在前端开发中，弹窗是常见的交互组件之一。Layui是一套比较实用的前端UI框架，提供了多种弹窗方式。但默认的弹窗动画有些单调，不能完全满足我们的需求。因此，本文将介绍如何使用Layui自定义滑动弹窗动画，让弹窗效果更具有特色。

2. Layui滑动弹窗实现

2.1 弹窗基本结构

首先，在HTML文件中创建一个基本的弹窗结构，包括弹窗头部、内容区域和底部按钮等。

<div class="custom-dialog">
  <div class="custom-dialog-header">弹窗标题</div>
  <div class="custom-dialog-content">
    弹窗内容
  </div>
  <div class="custom-dialog-footer">
    <button class="layui-btn layui-btn-primary">取消</button>
    <button class="layui-btn">确定</button>
  </div>
</div>

2.2 弹窗样式

为了实现滑动效果，我们需要给弹窗添加样式，并设置位置、大小和背景等属性。

.custom-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: auto;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  opacity: 0;
  transition: .3s opacity;
}
.custom-dialog-header {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}
.custom-dialog-content {
  padding: 20px;
  font-size: 14px;
  color: #666;
}
.custom-dialog-footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #eee;
}

2.3 弹窗动画

为了实现滑动动画，我们需要使用JavaScript代码，根据弹窗状态显示或隐藏弹窗，并添加相应的过渡样式。

// 定义弹窗对象
var customDialog = {
  // 显示弹窗
  show: function() {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 1);
    $('body').css('overflow', 'hidden');
    dialog.addClass('custom-dialog-show');
  },
  // 隐藏弹窗
  hide: function() {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 0);
    $('body').css('overflow', 'auto');
    dialog.removeClass('custom-dialog-show');
  }
};
// 监听按钮点击事件
$('.custom-dialog-footer button').click(function() {
  customDialog.hide();
});

3. 自定义滑动弹窗动画

3.1 思路分析

通过上面的步骤，我们已经实现了一个基本的滑动弹窗效果。但默认的左右滑动动画可能不能完全符合我们的需求。因此，我们需要自定义弹窗动画。

我们可以通过CSS动画实现弹窗的滑动、旋转、缩放等效果，并结合JavaScript代码实现弹窗的显示和隐藏。以下是基本的步骤：

定义CSS动画效果

通过JavaScript代码添加动画效果

3.2 CSS动画效果

在CSS文件中定义一个自定义动画的类，为元素添加相应的动画效果。

/* 从左侧进入 */
.custom-dialog-show.custom-dialog-slide-left {
  transform: translateX(-100%);
  animation: custom-dialog-slide-left .5s forwards;
}
@keyframes custom-dialog-slide-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 从右侧进入 */
.custom-dialog-show.custom-dialog-slide-right {
  transform: translateX(100%);
  animation: custom-dialog-slide-right .5s forwards;
}
@keyframes custom-dialog-slide-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

3.3 JavaScript代码

在JavaScript代码中，我们需要根据弹窗的状态，为弹窗添加对应的CSS动画类。

// 定义弹窗对象
var customDialog = {
  // 显示弹窗
  show: function(animation) {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 1);
    $('body').css('overflow', 'hidden');
    dialog.addClass(animation);
    dialog.addClass('custom-dialog-show');
  },
  // 隐藏弹窗
  hide: function(animation) {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 0);
    $('body').css('overflow', 'auto');
    dialog.removeClass('custom-dialog-show');
    dialog.removeClass(animation);
  }
};
// 监听按钮点击事件
$('.custom-dialog-footer button').click(function() {
  if ($(this).index() === 0) {
    customDialog.hide('custom-dialog-slide-left');
  } else {
    customDialog.hide('custom-dialog-slide-right');
  }
});
// 显示弹窗
$('.custom-btn').click(function() {
  if ($(this).hasClass('custom-btn-left')) {
    customDialog.show('custom-dialog-slide-left');
  } else {
    customDialog.show('custom-dialog-slide-right');
  }
});

3.4 完整代码

以下是实现自定义滑动弹窗的完整代码：

<div class="custom-dialog">
  <div class="custom-dialog-header">弹窗标题</div>
  <div class="custom-dialog-content">
    弹窗内容
  </div>
  <div class="custom-dialog-footer">
    <button class="layui-btn layui-btn-primary">取消</button>
    <button class="layui-btn">确定</button>
  </div>
</div>
<button class="layui-btn custom-btn custom-btn-left">从左侧进入</button>
<button class="layui-btn custom-btn custom-btn-right">从右侧进入</button>
<style>
/* 弹窗样式 */
.custom-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: auto;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  opacity: 0;
  transition: .3s opacity;
}
.custom-dialog-header {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}
.custom-dialog-content {
  padding: 20px;
  font-size: 14px;
  color: #666;
}
.custom-dialog-footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #eee;
}
/* 动画样式 */
.custom-dialog-show.custom-dialog-slide-left {
  transform: translateX(-100%);
  animation: custom-dialog-slide-left .5s forwards;
}
@keyframes custom-dialog-slide-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.custom-dialog-show.custom-dialog-slide-right {
  transform: translateX(100%);
  animation: custom-dialog-slide-right .5s forwards;
}
@keyframes custom-dialog-slide-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 按钮样式 */
.custom-btn {
  margin-top: 20px;
}
.custom-btn-left {
  margin-right: 20px;
}
</style>
<script>
// 定义弹窗对象
var customDialog = {
  // 显示弹窗
  show: function(animation) {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 1);
    $('body').css('overflow', 'hidden');
    dialog.addClass(animation);
    dialog.addClass('custom-dialog-show');
  },
  // 隐藏弹窗
  hide: function(animation) {
    var dialog = $('.custom-dialog');
    dialog.css('opacity', 0);
    $('body').css('overflow', 'auto');
    dialog.removeClass('custom-dialog-show');
    dialog.removeClass(animation);
  }
};
// 监听按钮点击事件
$('.custom-dialog-footer button').click(function() {
  if ($(this).index() === 0) {
    customDialog.hide('custom-dialog-slide-left');
  } else {
    customDialog.hide('custom-dialog-slide-right');
  }
});
// 显示弹窗
$('.custom-btn').click(function() {
  if ($(this).hasClass('custom-btn-left')) {
    customDialog.show('custom-dialog-slide-left');
  } else {
    customDialog.show('custom-dialog-slide-right');
  }
});
</script>

4. 总结

在本文中，我们介绍了如何使用Layui自定义滑动弹窗动画。通过CSS动画和JavaScript代码的结合，我们可以实现多种炫酷的弹窗效果，提高用户体验。希望本文对您有所帮助。

layui自定义滑动弹窗动画