过滤的投资组合画廊 - 使用 jquery 缓和动画

Question

我目前正在处理过滤后的画廊。我正在使用引导程序组合库作为框架。我有过滤工作，但我希望当我单击过滤器选项卡时出现缓动动画。有没有办法用 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') 并在css 中将.scale 的比例更改为0？我不太确定如何将.animate 与转换标签一起使用。

Answer 1

你可以使用csstransition

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