samentic 在IE9 不支持 transition 的解決方案

 

本文原文鏈接為：http://www.cnblogs.com/jying/p/6377696.html  ，轉載請注明出處。

 

在使用samentic過程中遇到 IE9 下報如下錯誤：

查閱了好多資料終於功夫不負有心人，找到一篇對於 IE9 下bug 的解釋：https://github.com/Semantic-Org/Semantic-UI/pull/1781 

由此可知 samentic 中的動畫效果使用 CSS3 transition 進行過渡，而通過 http://www.w3school.com.cn/cssref/pr_transition.asp 可確認 IE9 並不支持 transition ，導致在 IE9 中samentic 的許多控件都無法使用。

走投無路時去看看源文件吧，查看 components/dropdown.js 文件得知 samentic 通過 

if ($.fn.transition !== undefined && $module.transition('is supported'))

判斷瀏覽器是否支持 transition ，原代碼（綠色注釋是我自己加的）如下：

show: function(callback, $subMenu) {
            var
              $currentMenu = $subMenu || $menu,
              start = ($subMenu)
                ? function() {}
                : function() {
                  module.hideSubMenus();
                  module.hideOthers();
                  module.set.active();
                },
              transition
            ;
            callback = $.isFunction(callback)
              ? callback
              : function(){}
            ;
            module.verbose('Doing menu show animation', $currentMenu);
            module.set.direction($subMenu);
            transition = module.get.transition($subMenu);
            if( module.is.selection() ) {
              module.set.scrollPosition(module.get.selectedItem(), true);
            }
            if (module.is.hidden($currentMenu) || module.is.animating($currentMenu)) {
                //以下是重點判斷 --------
                if (transition == 'none') {
                    // transition 為 none
                    start();
                    $currentMenu.transition('show');
                    callback.call(element);
                }
                else if ($.fn.transition !== undefined && $module.transition('is supported')) {
                    // 瀏覽器支持 transition
                    $currentMenu.transition({
                        animation: transition + ' in',
                        debug: settings.debug,
                        verbose: settings.verbose,
                        duration: settings.duration,
                        queue: true,
                        onStart: start,
                        onComplete: function () {
                            callback.call(element);
                        }
                    });
                }
                else {
                    // 否則報錯
                    module.error(error.noTransition, transition);
                }
            }
          },

通過加斷點追蹤發現，在 IE9 下 $module.transition('is supported') 為 false，即不支持 transition。

注意到

if (transition == 'none') {
    //transition 為 none
    start();
    $currentMenu.transition('show');
    callback.call(element);
}

心想這是否是在無 transition 情況下的運行呢？死馬當活馬醫試試吧，給以上代碼加上 !$module.transition('is supported') 判斷如下：

if (transition == 'none' || !$module.transition('is supported')) {
    start();
    $currentMenu.transition('show');
    callback.call(element);
}

運行！哇塞，神奇的事情發生了！不報錯而且dropdown效果出現啦！！！僅僅是加了一個 !$module.transition('is supported') 判斷就解決了！！！以上為show方法，然后為hide方法也加上該判斷，一切正常！

舉一反三，馬上看看其它控件，拿popup驗證下，其源代碼如下：

show: function(callback) {
            callback = $.isFunction(callback) ? callback : function(){};
            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
              module.set.visible();
              $popup
                .transition({
                  animation  : settings.transition + ' in',
                  queue      : false,
                  debug      : settings.debug,
                  verbose    : settings.verbose,
                  duration   : settings.duration,
                  onComplete : function() {
                    module.bind.close();
                    callback.call($popup, element);
                    settings.onVisible.call($popup, element);
                  }
                });
            }
            else {
              module.error(error.noTransition);
            }
          },

發現popup 的show方法中無 transition == "none" 的判斷，所以直接為其添加 !$module.transition('is supported') 判斷，並對內部實現進行稍加改進，順利運行，修改后的代碼如下：

        animate: {
          show: function(callback) {
            callback = $.isFunction(callback) ? callback : function(){};
            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
              module.set.visible();
              $popup
                .transition({
                  animation  : settings.transition + ' in',
                  queue      : false,
                  debug      : settings.debug,
                  verbose    : settings.verbose,
                  duration   : settings.duration,
                  onComplete : function() {
                    module.bind.close();
                    callback.call($popup, element);
                    settings.onVisible.call($popup, element);
                  }
                });
            }
            //此處為新加
            else if (!$module.transition('is supported')) {
                module.set.visible();
                module.bind.close();
                $popup.transition('show');
                callback.call(element);
            }
            //以上為新加
            else {
              module.error(error.noTransition);
            }
          },
          hide: function(callback) {
            callback = $.isFunction(callback) ? callback : function(){};
            module.debug('Hiding pop-up');
            if(settings.onShow.call($popup, element) === false) {
              module.debug('onShow callback returned false, cancelling popup animation');
              return;
            }
            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
                $popup.transition({
                    animation: settings.transition + ' out',
                    queue: false,
                    duration: settings.duration,
                    debug: settings.debug,
                    verbose: settings.verbose,
                    onComplete: function () {
                        module.reset();
                        callback.call($popup, element);
                        settings.onHidden.call($popup, element);
                    }
                });
            }
            //此處為新加
            else if (!$module.transition('is supported')) {
                module.reset();
                $popup.transition('hide');
                callback.call(element);
            }
            //以上為新加
            else {
              module.error(error.noTransition);
            }
          }
        },

  

目前驗證dropdown和popup 控件一切正常，其它控件有用到的同學請自行驗證。

 

其實問題的解決過程並非像上面描述的這么簡單，走了不少彎路，假如先看的是popup.js 可能就不會有這個問題的解決了，所以有時候人真的也得靠一點點運氣活着O(∩_∩)O，也希望大家轉發時標明出處，謝謝閱讀~~