JQuery масонство добавить элементы без «выращивания» анимации

Question

Я использую Кладку и добавив некоторые элементы ($ боксов куча HTML, содержащей диву)

$('#masons').append($boxes).masonry('appended', $boxes, false); 

Это работает -> новые дивы организованы масонством должным образом. Тем не менее, он включает в себя раздражающую анимацию, где поле «растет» из центра его положения. Я не хочу эту анимацию. Как я могу избавиться от него?

Я попытался

$('#masons').append($boxes).masonry('reload'); 

Но это, кажется, не работает вообще -> новые дивы не организованы масонством.

Answer 1

Я согласен. Я не являюсь отличным поклонником стандартной анимации при добавлении новых элементов, вместо того, чтобы использовать «transitionDuration: 0». Я считаю, что использовать опцию hiddenStyle более аккуратно.

Кладка по умолчанию с использованием:

hiddenStyle: { 
    opacity: 0, 
    transform: 'scale(0.001)' 
} 

Вы можете передать свою собственную версию во время инициализации, здесь Я удаляю вариант масштаба, который будет отключать «растущую» анимацию.

// Initialize Masonry 
    $('#container').masonry 
    itemSelector: ".item", 
    hiddenStyle: { opacity: 0 } 

Answer 2

Ok Я нашел решение здесь: https://github.com/desandro/masonry/issues/183

я должен был установить transitionDuration: 0

Так полный код ...

// Initialize Masonry 
$('#masons').masonry({ 
    columnWidth: 127.5, 
    itemSelector: '.mason-block', 
    transitionDuration: 0 
}); 

// Generate boxes and then append them 
$('#masons').append($boxes).masonry('appended', $boxes, true); 

// Custom fading animation 
$('.mason-block img').on('load', function() { 
    $(this).fadeIn(250); 
}).each(function() { 
    if(this.complete) { 
    $(this).load(); 
    } 
}); 

Теперь они исчезают в красиво вместо «растет "