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

【问题标题】：Firefox CSS3 transition not working when toggled from external js file从外部 js 文件切换时，Firefox CSS3 转换不起作用
【发布时间】：2013-10-28 17:21:52
【问题描述】：

我知道已经有很多关于 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);

    };
};

【问题讨论】：

标签： javascript jquery html css firefox

【解决方案1】：

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

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

【讨论】：