Question

我正在使用＆＃34;变形按钮概念＆＃34;从这里http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/

问题是它无法在IE9中运行。错误说： if（ev.target！== this） {exception} undefined或null

我在stackoverflow https://stackoverflow.com/a/1143236/3310123

上找到了这个

但是我似乎无法将它实现到uiMorphingButton_fixed.js，它带有＆＃34;变形按钮＆＃34;

有没有人知道要改变什么以使其在IE 9中工作（它在10和11中工作）？

if（ev.target！== this）可以在uiMorphingButton_fixed.js的第90行找到： 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();
    }

Answer 1

问题似乎在这里：

support.transitions正在返回false，因此运行onEndTransitionFn()（在最后的其他位置）。

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

但是该函数需要一个参数，并期望该参数具有target属性。因此，在没有参数的情况下调用它会产生您看到的错误。

也许在最后一个if语句之后删除else。但是，没有办法解决support.transitions仍然是假的问题，因此变形可能仍然无法发挥作用。

Answer 2

我更新了.js，所以它现在适用于IE9。用以下代码替换整个uiMorphingButton_fixed.js：

希望这有助于某人：）

    ;( 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 );

变形按钮概念不工作在互联网探险家IE 9

2 个答案: