我已经建立了一个多月的画廊，布局很简单，左边是缩略图菜单，右边是画廊预览。当您单击已加载的缩略图时，它会触发一个 mousdown 事件，该事件会折叠缩略图区域并将画廊预览扩展到完整大小(全部使用 CSS3 转换)。到目前为止，一切正常，除了我创建了一个 omouseover 事件，当您将鼠标悬停在缩略图上时该事件会激活该功能。该函数重绘图库预览 div(“图片”)的内容并创建三张图像，两张是帧中的上一张图像，一张是帧中的下一张图像(在中心)。在 innerHTML 中，它将 CSS 样式“left:”设置为 724px 或 -724px，具体取决于它是向前还是向后。然后当生成所有这些 html 的函数完成时，负责监视开关的函数将“style.left =”设置为“0px”。所有这些都适用于 safari 和 chrome。但出于某种原因，firefox 拒绝为过渡设置动画!我已经研究了这个故障好几天了，但一无所获，在不同的版本中，我可以在错误的时间触发过渡。但是在 firefox 中发生的只是从 724px 到 0 px 的无过渡变化。这是我的代码片段。

这会切换缩略图并激活转换图像的功能

document.getElementById(thumbid).onmouseover = function() {
    num = parseInt(this.name);
    this.src = image[1][num].src;
    this.style.cursor = "pointer";
    switcher(num, null);
}

这是计算如何切换图像的函数，它设置了一个计时器(在它下面的变量中看到)接受输入而不更改图像，直到图像完成转换:

function switcher (num, direction) {
    if (direction == 'left') {
        num--;
    } else if (direction == 'right') {
        num++;
    }

    if (num < 0) {
        num = fullcount-1;
    } else if (num == fullcount) {
        num = 0;
    }

    if (intransit == false) {
        drawgallery(num);

        document.getElementById("photos").style.left = "0px";
        intransit = true;
        transittimer = setTimeout("intransit = false; if (transitnumber != null) { switcher(transitnumber, null); transitnumber = null; }", 450);
    } else {
        transitnumber = num;
    }

}
var transittimer = null;
var intransit = false;
var transitnumber = null;

这是绘制图库的实际元素，起始变量成为左侧变量。然后 afterdrawgallery 函数自行完成切换器将 div 的“左”设置为 0px，这在除 firefox 之外的每个浏览器中都会转换转换:

function drawgallery(num) {
    start = 724;
    if (num > curpos) {
    } else {
        start = "-"+start;
    }
    table = "<div id=\"photos\" style=\"position:absolute; height:470px; top:0px; left:"+start+"px;\">";

    //first square drawn at an X of 0 so that the image remains the same but the drawer can slide over.
    table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:-724px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:724px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    /////////////////////////////

    //second square drawn at an X of either negative or positive 724 so that the image remains the same but the drawer can slide over.
    table += "<div id=\"i"+orderarr[2][num]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:0px; width:724px; height:470px;\">";
    if (curpos <= (totalloaded-1)) {
        table += "<img id=\"i"+num+"\" src=\"image.php?field=pics&id="+orderarr[2][num]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />";
    } else {
        table += "<div id=\"iloader"+orderarr[2][num]+"\" class=\"loader\" style=\"top:205px;\" ></div>";
    }
    table += "</div>";
    table += "</div>";  
    document.getElementById("pics").innerHTML = table;
    curpos = num;
}

最佳答案

尝试为转换添加超时。超时是过渡属性中的最后一个属性。

-moz-transition:all 1s linear 1s;

你的元素在那一刻应该是可见的，所以可见性和显示属性应该是 block 状和可见的。您可以使用 opacity:0 (filter:alpha(opacity=0) for ie) 使其隐藏。

假设这会有所帮助。

关于javascript - 使用 JavaScript 事件处理程序和函数的 CSS3 转换不会在 Firefox 中触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8059745/