javascript - 从外部 js 文件切换时，Firefox CSS3 转换不起作用

Question

我知道已经有很多关于 CSS3 过渡在 Firefox 中不起作用的问题。我认为这一个可能非常独特。当添加到 $(document).ready() 中的相关点击功能时，转换确实有效。但是一旦我将相同的代码放入一个基本的 js 类并在 $(document).ready 中实例化，它就拒绝在 firefox 24 中工作。在所有其他主要浏览器中工作。

任何人都可以阐明一下。

我在这里建立了一个测试站点:http://test.gladekettle.com.au/modal/

var ModalApp = function  (options) {
    //default options
    var defaultOptions = {
        modalElem       : "#modalresponsive",
        z               : 99,
        overflowvisible : true,
        scrollbardelay  : 1000
    }

    for (i=0; i < options.length;i++){
        if(typeof options[i] === "undefined"){ options[i] = defaultOptions[i];
        }
    } //for - set default options if not defined.

    var $modalObj = $(options.modalElem);
    var zindex   = options.z;

    $modalObj.css('z-index', zindex);
    $modalObj.addClass('modalhidden');

    this.close = function() {
        $modalObj.removeClass('scrollvisible');
        $modalObj.removeClass('modalvisible').addClass('modalhidden');
        $('.modalactive').removeClass('modalactive');
    };
    this.open = function() {
        $('html').addClass('modalactive');
        $modalObj.removeClass('modalhidden').addClass('modalvisible');

        setTimeout(function() {
            $modalObj.addClass('scrollvisible');
        }, options.scrollbardelay);

    };
};

Answer 1

这与“外部js文件”无关。罪魁祸首是 .modalactive { overflow: hidden; }，它在点击时被设置/取消设置为 html 并且似乎出于某种原因取消了转换。 您可以通过禁用规则来验证这一点，使用开发人员工具在您的站点上运行或查看 this fiddle .

你应该 file a bug并停止使用该规则。