Преобразование CSS3 не запускается в Firefox с обработчиками событий и функциями JavaScript

Question

Я строил галерею в течение месяца или около того, макет прост, есть меню миниатюр слева и предпросмотр галереи справа. когда вы щелкаете по загруженному миниатюру, она запускает событие mousdown, которое сворачивает область миниатюр и расширяет предварительный просмотр галереи до полного размера (все с использованием преобразований CSS3). до сих пор все работает отлично, за исключением того, что я создал событие omouseover, которое активирует функцию, когда вы наводите курсор на миниатюру. функция перерисовывает содержимое галереи предварительного просмотра div («фото») и создает три изображения, два - предыдущее изображение в кадре, одно - следующее изображение в кадре (в центре). в innerHTML он устанавливает стиль CSS "left:" в 724px или -724px в зависимости от того, идет ли он вперед или назад. затем, когда функция, которая генерирует весь этот html, завершена, функция, отвечающая за мониторинг переключателя, устанавливает "style.left =" в "0px". все это работает в сафари и хром. но по какой-то причине 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;
}

Answer 1

Попробуйте добавить время ожидания для переходов.Тайм-аут является последним атрибутом свойства перехода.

-moz-transition: все 1 с линейными 1 с;

В этот момент ваш элемент должен быть видимым, поэтому свойство видимости и отображения должно быть блоком ивидимый.Вы можете использовать opacity: 0 (filter: alpha (opacity = 0) для ie), чтобы скрыть его.

Предположим, это поможет.