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

Answer 1

您可以使用 css transition

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

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

Filtered portfolio gallery - easing animations with jquery

javascript

portfolio

gallery