过滤的投资组合库 - 使用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')并将csc中的.scale的比例更改为0？我不太确定如何将.animate与transform标签一起使用。

Answer 1

你可以使用css transition

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