sweetalert使用踩坑记--animation配置失效--源码攀爬之旅

文章结论

先写结论，省童鞋们的时间：sweetalert不支持（废弃了）animation的配置

前言背景

应届生新人入职半个月，今日情景~~

• 产品大大提出需求：“这个这个，弹框‘噔’一下的动画感受很累赘嘛，xxx去掉一下”；
• “奴才领命” 查阅代码发现公司采用sweetalert做为弹窗提示插件，插件嘛，简单，看看文档看看博客预期三除五二下应该很快能解决，怎奈，他那时候还太年轻，不知道全部命运馈赠的礼物，早已经在暗中标好了价格。遂开始踩坑之旅

问题

其实状况挺简单，查找文档以及网友支持，都说只要配置animation项便可，但配置好了打死不生效，开始担忧版本，1.0和2.0的版本中，前者说是用false，后者说是用none，虽然说查看源码版本说是1.0，但也都试试了，结果果真。。仍是然并卵；开始挠头。。 通过一上午的查阅资料和博客无效，放弃挣扎，再者咱怎能当伸手党，来到史上最大的同性交友网站--github，开始查阅源码，注意注意，重点来啦，源码开始！！

源码浅略解析

• 使用代码及效果以下

swal({
                  title: "删除订单",
                  text:'订单删除后不可找回，请确认是否删除',
                  icon: "error",
                  animation: false,
                  buttons: {
                    cancel: '取消',
                    confirm: '肯定删除',
                  }
                }).then(isConfirm => {
                    if(isConfirm){
                        self.delete_loading = true
                        http.delete('/order/'+item.id,{},response => {
                            self.delete_loading = false
                            self.current_order.splice(index, 1)
                        })
                    }
                })
复制代码

• 首先来到源码文件夹,本小菜开始在src下寻找入口文件（别问为啥）

• 进入core.ts文件开始探究，关键代码以下（虽然是typescript写的，但其实语法差别是不大的，结合以前实习过java，ts我的理解只是对弱类型的js进行了一层抽象与规范而已，不了解ts的童鞋看不懂的地方就当没看见，其实也是可以理解的啦）

const swal:SweetAlert = (...args) => {

  // Prevent library to be run in Node env:
  if (typeof window === 'undefined') return;

  const opts: SwalOptions = getOpts(...args);

  return new Promise<any>((resolve, reject) => {
    state.promise = { resolve, reject };

    init(opts);

    // For fade animation to work:
    setTimeout(() => {
      openModal();
    });

  });
};
复制代码

• 因而获得重点函数，getOpts，见名知意，是对配置参数的处理 进入此函数

能够看到，此处遍历配置参数切经过paramToOption方法对参数进一步处理而后用assign进行对象合并处理，从而获得最终的配置对象，咱们也应该理所应当的想到，此处必然有一个默认参数对象与传递参数对象的合并；查找发现以下

能够发现，配置对象的接口，竟然，没有，animation？？！！

• 打破砂锅问到底，进一步探索 注意到getOpts方法内有一步操做，是遍历finalOptions最终配置对象，打印日志，进入logDeprecation方法，水落石出

• 查阅后发现DEPRECATED_OPTS是指已废弃的配置属性，发现了咱们可爱可怜的animation，此处就不贴图了，伤口刚刚愈合，奈何晴空孤雁，独留一人伤心；
• 最后最后，强调一下，文档有误，竟然还有animation配置，各位童鞋莫要踩坑