Вопросы Теги

Javascript, как показать каждый элемент массива на новой строке

Этот метод обхода для турбовинков 5, но должен быть легко адаптирован.

Загрузка происходит мгновенно, потому что таймер turbolinks, он отображает страницу перед вызовом ajax, разбивая анимацию.

Чтобы получить эффект эффекта загрузки, мы должны отключить его: 

<head>
....
  <meta name="turbolinks-cache-control" content="no-cache">

Тогда мы можем сделать что-то вроде: (используя animated.css) 

$(document).on('turbolinks:click', function(){
  $('.page-content')
    .addClass('animated fadeOut')
    .off('webkitAnimationEnd oanimationend msAnimationEnd animationend')
});


$(document).on('turbolinks:load', function(event){
    // if call was fired by turbolinks
    if (event.originalEvent.data.timing.visitStart) { 
      $('.page-content')
        .addClass('animated fadeIn')
        .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
          $('.page-content').removeClass('animated');
        });
    }else{
      $('.page-content').removeClass('hide')
    }  
...

При этом переход приятный и плавный.

13
задан Leron 12 June 2012 в 02:15
поделиться