同位素过滤器动画在第一次单击时不起作用

Question

我正在学习HTML5 / CSS，虽然同位素过滤几乎可以正常工作，但是有一个小错误。

默认情况下设置为“全部”，当我单击任何其他选项时，尽管它们已正确过滤，但动画不会触发。 之后，所有动画效果都很好，这只是问题的第一步。

任何帮助或想法将不胜感激。

这是相关的HTML和CSS：

  <div class="container-fluid filterable-portfolio">
        <div class="row">
           <div class="col-md-12">
              <ul class="nav nav-pills portfolio filter">
                 <li class="portfolio-title">Filter by:</li>
                 <li role="presentation" class="active"><a href="#" data-filter="*">All</a></li>
                 <li role="presentation"><a href="#"data-filter=".school">School Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".personal">Personal Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".unity">Unity Projects</a></li>
              </ul>
           </div>
        </div>
        <div class="row portfolio-items">
           <figure class="portfolio-item col-sm-4 school">
              <a href="#">
              <img src="http://placekitten.com/700/400" class="img-responsive">
              </a> /* this bit of code has several more instances, but i cut them to save space for asking this question */

这是CSS：

.portfolio-title {
padding: 10px 15px 10px 0;
font-weight: bold;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
background: none;
color: #000000;
}

.nav-pills > li.active > a{
color: #000000 !important;
background-color:#f5f5f5 !important;
}

.nav-pills a{
color: #000000;
margin-bottom: 1rem;
}

.nav>li>a:hover, .nav>li>a:focus {
background: none;
color: #000000;
}

.portfolio-item {
margin-bottom: 1rem;
}

.portfolio-item img {
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
border-radius:6px;
}

.portfolio-item:hover img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

.filterable-portfolio{
margin-bottom: 3rem;
}
.portfolio-item img{    
width :100%;    
}

这是js：

// init Isotope
var $container = $('.portfolio-items').isotope('layout');

// filter items on button click
$('.portfolio.filter').on( 'click', 'a', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });

//$('.portfolio-filter li').removeClass('active');
//$(this).closest('li').addClass('active');
});

Answer 1

该代码对我来说很好用。

var $portfolio_filter = $('.portfolio-items').isotope();    
$grid_selectors = $('.portfolio.filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.isotope({filter: selector}).isotope( 'reloadItems' ).isotope();
    return false;
});