变形按钮概念在 Internet Explorer IE 9 中不起作用

Question

我从这里http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/使用“变形按钮概念”

问题是它不能在 IE9 中运行。错误说： 如果（ev.target！==这个） {exception} 未定义或为空

我在stackoverflow上找到了这个https://stackoverflow.com/a/1143236/3310123

但我似乎无法将它实现到带有“变形按钮”的 uiMorphingButton_fixed.js

有谁知道要改变什么才能让它在 IE 9 中工作（它在 10 和 11 中工作）？

if(ev.target !== this) 可以在 uiMorphingButton_fixed.js 的第 90 行找到： var self = 这个， onEndTransitionFn = 函数（ev）{ if( ev.target !== this ) return false;

            if( support.transitions ) {
                // open: first opacity then width/height/left/top
                // close: first width/height/left/top then opacity
                if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) {
                    return false;
                }
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            self.isAnimating = false;

            // callback
            if( self.expanded ) {
                // remove class active (after closing)
                classie.removeClass( self.el, 'active' );
                self.options.onAfterClose();
            }
            else {
                self.options.onAfterOpen();
            }

            self.expanded = !self.expanded;
        };

    if( support.transitions ) {
        this.contentEl.addEventListener( transEndEventName, onEndTransitionFn );
    }
    else {
        onEndTransitionFn();
    }

Answer 1

问题似乎出在这里：

support.transitions 正在返回 false，因此运行 onEndTransitionFn()（在末尾的 else 中）。

不会向 onEndTransitionFn 函数发送任何参数。

但该函数需要一个参数，并希望该参数具有target 属性。所以不带参数调用它会产生你看到的错误。

也许在最后一个 if 语句之后删除 else。但是没有办法解决 support.transitions 仍然是 false 的事实，所以变形可能仍然不起作用。

Answer 2

我更新了 .js，所以它现在也可以在 IE9 上运行。将整个 uiMorphingButton_fixed.js 替换为：

希望这对某人有所帮助:)

/** * uiMorphingButton_fixed.js v1.0.0 * http://www.codrops.com * 在 MIT 许可下获得许可。 * http://www.opensource.org/licenses/mit-license.php * 版权所有 2014，Codrops */

    ;( function( window ) {

    'use strict';

    var transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function UIMorphingButton( el, options ) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    UIMorphingButton.prototype.options = {
        closeEl : '',
        onBeforeOpen : function() { return false; },
        onAfterOpen : function() { return false; },
        onBeforeClose : function() { return false; },
        onAfterClose : function() { return false; }
    }

    UIMorphingButton.prototype._init = function() {
        // the button
        this.button = this.el.querySelector( 'button' );
        // state
        this.expanded = false;
        // content el
        this.contentEl = this.el.querySelector( '.morph-content' );
        // init events
        this._initEvents();
    }

    UIMorphingButton.prototype._initEvents = function() {
        var self = this;
        // open
        this.button.addEventListener( 'click', function() { 
            if(support.transitions) {
              self.toggle(); 
            } else {
              classie.addClass( self.el, 'active open' );
            } 
        } );
        // close
        if( this.options.closeEl !== '' ) {
            var closeEl = this.el.querySelector( this.options.closeEl );
            if( closeEl ) {
                closeEl.addEventListener( 'click', function() { 
                    if(support.transitions) {
                      self.toggle(); 
                    } else {
                      classie.removeClass( self.el, 'active open' );
                    } 
                } );
            }
        }
    }

    UIMorphingButton.prototype.toggle = function() {
        if( this.isAnimating ) return false;

        // callback
        if( this.expanded ) {
            this.options.onBeforeClose();
        }
        else {
            // add class active (solves z-index problem when more than one button is in the page)
            classie.addClass( this.el, 'active' );
            this.options.onBeforeOpen();
        }

        this.isAnimating = true;

        var self = this,
            onEndTransitionFn = function( ev ) {
                if( ev.target !== this ) return false;

                if( support.transitions ) {
                    // open: first opacity then width/height/left/top
                    // close: first width/height/left/top then opacity
                    if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) {
                        return false;
                    }
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                self.isAnimating = false;

                // callback
                if( self.expanded ) {
                    // remove class active (after closing)
                    classie.removeClass( self.el, 'active' );
                    self.options.onAfterClose();
                }
                else {
                    self.options.onAfterOpen();
                }

                self.expanded = !self.expanded;
            };

        if( support.transitions ) {
            this.contentEl.addEventListener( transEndEventName, onEndTransitionFn );
        }
        else {
            onEndTransitionFn();
        }

        // set the left and top values of the contentEl (same like the button)
        var buttonPos = this.button.getBoundingClientRect();
        // need to reset
        classie.addClass( this.contentEl, 'no-transition' );
        this.contentEl.style.left = 'auto';
        this.contentEl.style.top = 'auto';

        // add/remove class "open" to the button wraper
        setTimeout( function() { 
            self.contentEl.style.left = buttonPos.left + 'px';
            self.contentEl.style.top = buttonPos.top + 'px';

            if( self.expanded ) {
                classie.removeClass( self.contentEl, 'no-transition' );
                classie.removeClass( self.el, 'open' );
            }
            else {
                setTimeout( function() { 
                    classie.removeClass( self.contentEl, 'no-transition' );
                    classie.addClass( self.el, 'open' ); 
                }, 25 );
            }
        }, 25 );
    }

    // add to global namespace
    window.UIMorphingButton = UIMorphingButton;

})( window );