在本文中，我们将深入探讨如何使用layer扩展来实现打开和关闭窗口时的自定义或第三方动画效果。Layer是一个流行的JavaScript弹窗插件，它提供了丰富的功能和高度的可定制性。通过扩展其默认行为，我们可以为弹窗添加更加生动有趣的动画效果。
1. **打开窗口时的自定义动画**
当我们创建一个新的layer窗口时，默认情况下，layer会使用预设的动画。然而，如果我们想要使用自定义或第三方CSS动画库（如Animate.css），我们需要对`layer.js`文件进行一些修改。找到`Class.pt.creat`函数中的动画处理代码，这段代码主要用于添加和移除动画类。原代码只处理了layer内置的动画。为了支持自定义动画，我们需要添加一个条件判断，如下：
```javascript
if (doms.anim[config.anim]) {
var animClass = 'layer-anim ' + doms.anim[config.anim];
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass(animClass);
});
} else {
// 支持自定义的，或者第三方弹出动画
var animClass = config.anim;
var animated = 'animated'; // 假设你正在使用Animate.css，这个是它的基础动画类
that.layero.addClass(animated);
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass(animClass);
$(this).removeClass(animated);
});
}
```
这段修改后的代码将允许我们在打开窗口时使用自定义的动画类，并在动画结束后自动移除动画效果。
2. **关闭窗口时的自定义动画**
要实现关闭窗口时的自定义动画，我们需要在调用`layer.open`时传递一个额外的参数`closeAnim`。我们更新`Class.pt.config`以接收这个新参数，并在`Class.pt.creat`函数中记录关闭动画时使用的类。然后，在`layer.close`函数中，根据`closeAnim`参数添加相应的动画效果。这包括检查`layero.data('isOutAnim')`和`layero.data('closeAnim')`，并应用相应的动画类。
```javascript
// 在layer.open时设置closeAnim参数
layer.open({
content: '我是有动画的弹窗',
closeAnim: 'your-animation-class'
});
// 在layer.close时应用动画
if (layero.data('isOutAnim')) {
layero.addClass('layer-anim ' + layero.data('closeAnim'));
}
```
这样，我们就可以在关闭窗口时使用我们指定的动画类了，同样，动画结束时会自动移除该类。
总结，通过上述步骤，我们可以利用layer插件的扩展能力，为弹窗的打开和关闭过程添加丰富的自定义动画效果。这不仅增强了用户体验，也使得我们的网页交互更具吸引力。值得注意的是，使用自定义动画时，确保你已经正确引入了相应的CSS动画库，例如Animate.css，这样才能使动画效果正常工作。同时，记得在完成修改后测试所有功能，以确保动画不会影响其他层或页面的正常行为。
