css3 переходы для более чем одного элемента на странице и как отменить переход - PullRequest
Новая
       17

css3 переходы для более чем одного элемента на странице и как отменить переход

2 голосов
/ 21 ноября 2011

Я делаю сайт Jquery Mobile с двумя панелями, которые я хочу использовать CSS вместо использования простого show() / hide().

Я начал с этого:

Показать: 

 if ( $popPanel.attr('status') == 'hidden' ) {
      $popPanel.attr('status','visible')    
          .addClass('ui-panel-active pop in')
          .show('fast')
          .removeClass('in')                
          ...

Скрыть: 

 $(this).attr('status', 'hidden')   
   .addClass('reverse out') 
   .hide('fast')
   .removeClass('ui-panel-active reverse out pop')
   ...

, что не сработало, поскольку я считаю, что я удаляю классы перехода до того, как произойдет фактический переход.Но даже когда я изменяю его на: 

 if ( $popPanel.attr('status') == 'hidden' ) {
      $popPanel.attr('status','visible')    
          .addClass('ui-panel-active pop in')
          .show('fast')
          ...
          window.setTimeout( function() {
             console.log("fired"+$popPanel.jqmData('id') );
             $popPanel.removeClass('in');
             }, 350);

, я могу получить переход только для отображения в первом всплывающем окне.Другое всплывающее окно просто отображается (с задержкой 350), хотя оно правильно определено в консоли.

Вопросы

  • Можно ли использовать переходы CSS3 для нескольких элементов на странице?Любые намеки на то, что я делаю неправильно
  • Всплывающий переход не отображается вообще, даже с setTimeout.Что я тут не так делаю?

1 Ответ

1 голос
/ 22 ноября 2011

Я думаю, вы делаете это слишком сложно. Вот простой пример того, что я пытаюсь сделать. По сути, вы можете избавиться от всех этих переходных классов.Вам действительно нужен только класс «on» (в моем примере это «active»).CSS позаботится обо всем остальном.

...