element.style.display = 'none' не работает в Firefox, но в Chrome

Question

У меня есть этот анимированный лоток с кнопками, в котором я использую -moz-transition и -webkit-transition, в какой-то момент я скрываю кнопки, а затем убираю их в новой позиции. Это хорошо работает в Chrome, но по какой-то причине он не скрывает элементы в Firefox (игнорируя IE, пока другой парень в офисе специализируется на этом, поэтому он заставит его работать там, бедняжка).

Мне интересно, имеет ли это какое-то отношение к -moz-transition и если он ведет себя по-другому, то -webkit-transition действительно единственное, о чем я могу думать.

Вот функция, скрывающая кнопки (есть правая сторона с точно таким же синтаксисом):

          function hide_slide_left(button_one, button_two){

            if(button_two == ''){
                button_one.style.display = 'none';
                button_one.style.left = -120 + 'px';
                var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
            }else{
                button_one.style.display = 'none';
                button_two.style.display = 'none';
                button_one.style.left = -120 + 'px';
                button_two.style.left = -230 + 'px';
                var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
            }
         }

Show_slide_left устанавливает button_one.style.display = 'block'

Вот CSS для анимации:

        .buttons li {
          -webkit-transition: all .5s ease-in-out;
          -moz-transition: all .5s ease-in-out;
          z-index: 0;
        }

и вот css для кнопок (в трее их еще 4, всего 5):

        #button0{
          background: url(images/some_background_image.png) no-repeat;
          height: 117px;
          float: left;
          left:50px;
          width: 134px;
          display: block;
          cursor: pointer;
          position: absolute;
        }

Вот часть функции, которая вызывает hide_slide_left:

             var button_temp1 = '';
             var button_temp2 = '';
             var s = '';

             s = ((cc + 4)%5);
             cc = ((cc-number + 5)%5);

             if(number == 1){
                button_temp1 = document.getElementById("button"+ s);
                var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
             } else {
                button_temp1 = document.getElementById("button"+ s);
                s = ((s+4)%5);
                button_temp2 = document.getElementById("button"+ s);
                // button_temp2.style.left = 50 + 'px';
                var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
                // button_temp1.style.left = 194 + 'px';
             }

cc - это глобальная переменная, используемая для отслеживания того, где находятся кнопки в трее, а s, как вы можете видеть, это локальная область, просто используемая для выбора кнопок, которые нужно переместить.

Причина, по которой я пытаюсь скрыть кнопки до их повторного позиционирования, заключается в том, что пользователь не видит, куда они идут, пока они не окажутся в своем окончательном положении.

Кроме того, если я изменил задержку тайм-аута в hide_slide_left, то он как бы работает в Firefox, но он все еще глючит (иногда кнопки просто появляются вместо анимации, иногда нет), и он вводит все виды графического лага в анимацию, которая Я не могу терпеть. Так что все еще ищу помощи.

Любая помощь приветствуется, но я использую только JavaScript, а не jQuery, спасибо.

Вот jsFiddle, чтобы продемонстрировать, что я делаю: jsFiddle .

Если вы посмотрите на него в Chrome, то он прекрасно работает, когда блоки исчезают с экрана, они исчезают, а затем снова появляются на другой стороне и скользят на место. В Firefox они не исчезают, они просто скользят под (или поверх) других элементов и иногда не заходят так далеко, как следовало бы. Я действительно не понимаю, почему Firefox ведет себя так по-разному.

Answer 1

@ Нил отчасти правильно. Причина, по которой он не работает, заключается в том, что Mozilla реализовала переходы.

Однако это противоположно тому, что он сказал. Переход применяется, это display:none, который не применяется. По сути, это отменяется тем, что в CSS есть правило перехода.

Способ обойти это (в настоящее время, надеюсь, Mozilla меняет свою реализацию) - это использовать несколько функций и 2 разных правила класса css. (что громоздко, но все же может быть проще, чем перемещать что-либо с помощью JavaScript).

Итак, у вашего первого класса есть переход, который убирает плитку с экрана. Затем он получает новый класс, у которого нет правила перехода. затем вы можете установить его положение с помощью javascript на противоположную сторону от карусели, и он будет перемещаться туда мгновенно, не будучи видимым, поскольку у него больше нет свойства перехода. Наконец, вы повторно применяете класс перехода и перемещаете его в конечное положение на другой стороне карусели.

Эффект такой же, как в Chrome, но определенно не такой элегантный.

Answer 2

Единственное, чего не хватает в вашем коде, это закрывающей скобки для функции, но я уверен, что она есть в вашем коде, так как она работает на Chrome.

Странно, работает на моей машине в обоихFF и Chrome - как вы вызываете hide_slide_left и что такое button_one и button_two, когда вы его вызываете?

Answer 3

Я не думаю, что Firefox применяет переходы, когда вы используете стиль display: none; - вам нужно будет скрыть свою кнопку по-другому, возможно, с помощью visibility: hidden;.

Answer 4

попробуйте это

setAttribute( 'style', 'display:none' )

вместо

style.display = 'none';

Я пока не могу проверить это, но я думаю, что в FF есть некоторые странные поведения.