Остановить изотопную начальную анимацию при загрузке страницы

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

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

Я запускаю код, используя копию & вставляемого кода из демонстрации Isotope (хотя и с немного измененными именами классов), но до сих пор нет радости. См. Фрагмент кода ниже:

$(document).ready(function() 
{ 
    // Isotope Filtering 
    var $container = $('#portfolioItems'); 
    $container.isotope({ 
     // options... 
    }); 

    // filter items when filter link is clicked 
    $('.filter_nav a').click(function() 
    { 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 

     return false; 
    }); 

});

Фактическая фильтрация работает нормально, просто хочу предотвратить первоначальную анимацию.

Спасибо!

источник

2013-09-15 ed13

Он всегда кажется, делает начальную анимацию с позиций запуска (0,0) в места отдыха. Вы пытались сначала установить «animationOptions: Duration» на очень небольшое количество, чтобы это произошло мгновенно? –

@HiTechMagic - это отличная идея, но я использую CSS-переходы, а не jQuery для анимации, поэтому я не думаю, что могу ее изменить? Извините, должен был упомянуть об этом в моем посте. :) – ed13

Не имеет значения. Сроки используются переходы CSS, которые он генерирует на элементах. Просто сначала измените его и измените его на событие isonope'layout'. –

Вместо таргетинга .isotope для переходов в вашем css, укажите новый класс - например. .isotope-ready

.isotope-ready, .isotope-ready .isotope-item { 
    -webkit-transition-duration: 0.8s; 
     -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope-ready { 
    -webkit-transition-property: height, width; 
     -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope-ready .isotope-item { 
     -webkit-transition-property: -webkit-transform, opacity; 
     -moz-transition-property: -moz-transform, opacity; 
      -ms-transition-property:  -ms-transform, opacity; 
      -o-transition-property:  -o-transform, opacity; 
       transition-property:   transform, opacity; 
}

Компас версии ниже:

.isotope-ready, .isotope-ready .isotope-item 
    +transition-duration(.8s) 
.isotope-ready 
    +transition-property(height, width) 
    .isotope-item 
     +transition-property(transform, opacity)

Затем добавить новый класс в OnLayout обратного вызова изотопа

onLayout: function() { 
    $('.isotope').addClass('isotope-ready'); 
}

источник

2013-12-12 14:37:39

Остановить изотопную начальную анимацию при загрузке страницы

ответ

Смежные вопросы