CSS3轉換不在firefox中用javascript事件處理程序和函數發射

Question

我一直在建造一個月左右的圖庫，佈局很簡單，左側有一個縮略圖菜單，右側有一個圖庫預覽。當您單擊已加載的縮略圖時，會觸發縮小縮略圖區域的縮小事件並將庫預覽展開爲完整大小（全部使用CSS3轉換）。到目前爲止，除了我創建了一個omouseover事件，當您將鼠標懸停在縮略圖上時，所有功能都可以正常工作。該函數重新繪製庫預覽div（「圖片」）的內容並創建三個圖像，其中兩個是幀中的前一個圖像，一個是幀中的下一個圖像（位於中間）。在innerHTML中，它將CSS樣式「left：」設置爲724px或-724px，具體取決於它是前進還是後退。那麼當生成所有這些html的函數完成時，負責監視開關的函數將「style.left =」設置爲「0px」。所有這些都在safari和chrome中起作用。但由於某種原因，Firefox會拒絕動畫過渡！我已經研究了幾天的這個小故障，並且什麼也沒有做出來，在另一個版本中，我可以在錯誤的時間開始轉換。但firefox中發生的所有事情都是從724px到0px的無轉換變化。這是我的代碼片段。

此切換的縮略圖圖像，並激活該過渡圖像

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; 
} 

Answer 1

嘗試添加超時過渡。超時是轉換屬性中的最後一個屬性。

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

您的元素在該時刻應該是可見的，所以可見性和顯示屬性應該被阻擋並且可見。你可以使用opacity：0（過濾器：alpha（不透明度= 0）代表ie）使其隱藏。

假設這會有所幫助。