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);
                }
            }
          },

dropdown显示的源代码