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并停止使用该规则。

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

1 个答案: