Галерея фильтрованного портфеля - анимация с анимацией с jQuery

Question

В настоящее время я работаю над фильтрованной галереей. Я использую галерею портфолио bootstraps как структуру. У меня есть работа фильтрации, но я бы хотел, чтобы эта анимация облегчения произошла, когда я нажимаю на вкладку фильтра. Есть ли способ сделать это с помощью jquery?

Вот мой код до сих пор:

$(function() { 
    var selectedClass = ""; 
    $(".filter").click(function(){ 
    selectedClass = $(this).attr("data-rel"); 
    $(".work").fadeTo(100, 0.1); 
    $(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale'); 
    setTimeout(function() { 
     $("."+selectedClass).fadeIn().addClass('scale'); 
     $(".work").fadeTo(300, 1); 
    }, 300); 
    ); 
}); 

Можно ли добавить .animate({transform scale(1)}); к addClass('scale') и изменить масштаб 0 для .scale в CSS? Я не слишком уверен, как использовать .animate с тегом преобразования.

Answer 1

Вы можете использовать csstransition

.scale { 
    transition: transform 1s; 
    transform: scale(1); 
} 
.portfolio-item:not(.scale) { 
    transition: transform 1s; 
    transform: scale(0); 
}