ionic-toast 淡入淡出效果

来源：互联网发布：雕刻软件type3 编辑：程序博客网时间：2024/05/16 15:21

最近在做ionic项目，引入了ionic-toast插件后，发现无法实现淡入淡出效果，很生硬的block，none

所以抽出时间，修改了ionic-toast的js文件，本人菜鸟，大神误喷。

原理其实很简单

provider.show = function (message, position, isSticky, duration) {          if (!message) return;          position = position || defaultConfig.position;          duration = duration || defaultConfig.timeOut;          if (duration > 10000) duration = 10000;          angular.extend($scope.ionicToast, {            toastClass: toastPosition[position] + ' ' + (isSticky ? 'ionic_toast_sticky' : ''),            toastMessage: message          });          var qq = 0;          function time1(){            if(qq < 0.9){              $timeout(function () {                toggleDisplayOfToast('block', qq, function () {});                qq=qq+0.01;                time1();              }, 5);            }            if(qq>=0.9) {              toggleDisplayOfToast("block", qq, function() {                if (isSticky)  return;                toastTimer = $timeout(function () {                  $scope.hideToast();                }, duration);              });            }          }          time1();        };

使用递归，不断增加透明度，达到效果，淡出同理

        $scope.hideToast = function () {          var ww =0.9 ;          function timeO(){            if(ww > 0){              $timeout(function () {                toggleDisplayOfToast('block', ww, function () {});                ww=ww-0.01;                timeO();              }, 5);            }            if(ww<=0) {              toggleDisplayOfToast('none', ww, function () {              });            }          }          timeO();        };

最后送上净化后的代码复制粘贴至lib\ionic-toast\dist\ionic-toast.bundle.min.js 中即可使用

!function(t,n){var o=t.createElement("style");if(t.getElementsByTagName("head")[0].appendChild(o),o.styleSheet)o.styleSheet.disabled||(o.styleSheet.cssText=n);else try{o.innerHTML=n}catch(i){o.innerText=n}}(document,"\n.ionic_toast {\n  z-index: 9999;\n}\n\n.toast_section {\n  color: #FFF;\n  cursor: default;\n  font-size: 1em;\n  display: none;\n  border-radius: 5px;\n  opacity: 1;\n  padding: 10px 30px 10px 10px;\n  margin: 10px;\n  position: fixed;\n  left: 0;\n  right: 0;\n  text-align: center;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.75);\n}\n\n.ionic_toast_top {\n  top: 10px;\n}\n\n.ionic_toast_middle {\n  top: 40%;\n}\n\n.ionic_toast_bottom {\n  bottom: 10px;\n}\n\n.ionic_toast_close {\n  border-radius: 2px;\n  color: #CCCCCC;\n  cursor: pointer;\n  display: none;\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: 20px;\n  height: 20px;\n}\n\n.toast_close_icon {\n  position: relative;\n  top: 1px;\n}\n\n.ionic_toast_sticky .ionic_toast_close {\n  display: block;\n}\n\n.ionic_toast_close:active {\n\n}"),angular.module("ionic-toast",["ionic-toast.provider"]),angular.module("ionic-toast.provider",[]).provider("ionicToast",function(){var t={position:"top",showClose:!1,theme:"dark",timeOut:4e3};this.configure=function(n){angular.extend(t,n)},this.$get=["$compile","$document","$interval","$rootScope","$templateCache","$timeout",function(n,o,i,e,s,a){var c={},l=e.$new(),p=t.timeOut,d={toastClass:"",toastMessage:"",toastStyle:{display:"none",opacity:0}},r={top:"ionic_toast_top",middle:"ionic_toast_middle",bottom:"ionic_toast_bottom"},u=n(s.get("ionic-toast/templates/ionic-toast.html"))(l);l.ionicToast=d,o.find("body").append(u);var _=function(t,n,o){l.ionicToast.toastStyle={display:t,opacity:n},l.ionicToast.toastStyle.opacity=n,o()};return l.hideToast=function(){var ww=0.9;function timeO(){if(ww>0){a(function(){_('block',ww,function(){});ww=ww-0.01;timeO()},5)}if(ww<=0){_('none',ww,function(){})}}timeO()},c.show=function(n,o,i,e){n&&(o=o||t.position,e=e||t.timeOut,e>1e4&&(e=1e4),angular.extend(l.ionicToast,{toastClass:r[o]+" "+(i?"ionic_toast_sticky":""),toastMessage:n}));var qq=0;function time1(){if(qq<0.9){a(function(){_('block',qq,function(){});qq=qq+0.01;time1()},5)}if(qq>=0.9){_("block",qq,function(){i||(p=a(function(){l.hideToast()},e))})}}time1()},c.hide=function(){l.hideToast()},c}]}),angular.module("ionic-toast").run(["$templateCache",function(t){var n='<div class="ionic_toast"><div class="toast_section" ng-class="ionicToast.toastClass" ng-style="ionicToast.toastStyle" ng-click="hideToast()"><span class="ionic_toast_close"><i class="ion-android-close toast_close_icon"></i></span><span ng-bind-html="ionicToast.toastMessage"></span></div></div>';t.put("ionic-toast/templates/ionic-toast.html",n)}]);

0 0