Gridifier items flashes when filtering

[justkidding96]

Hi,

I've setup gridifier with this little code:

Template:

<div class="portfolio">
    <div class="portfolio__container">
        <div class="filter__row">
            <ul class="filter__col">
                <li><a href="javascript:void(0)" data-filter="all" class="active">All</a></li>
                <?php if ($terms = get_terms('portfolio_category')): ?>
                    <?php foreach ($terms as $term): ?>
                        <li>
                            <a href="javascript:void(0)" data-filter="<?php echo str_replace(' ', '-', strtolower($term->name)); ?>"><?php echo strtolower($term->name); ?></a>
                        </li>
                    <?php endforeach; ?>
                <?php endif; ?>
            </ul>
        </div>
        <div class="portfolio__row">
            <?php if ($cases): foreach ($cases as $case): ?>

            <?php
                $arr = array_map(function ($item) { return str_replace(' ', '-', $item); }, wp_get_post_terms($case->ID, 'portfolio_category', array('fields' => 'names')));
                $name = implode(' ', $arr);
            ?>
            <section class="portfolio__col all <?php echo strtolower($name); ?>">
                <a class="col__content" style="background-image: url(<?php echo get_the_post_thumbnail_url($case); ?>)" href="<?php echo get_permalink($case); ?>">
                    <h3><?php echo $case->post_title; ?></h3>
                    <h4><?php echo $case->client; ?></h4>
                    <span>Bekijk case</span>
                </a>
            </section>
            <?php endforeach; endif; ?>
        </div>
    </div>
</div>

Script:

$(document).ready(function() {
    if ($('.portfolio__row').length) {
        window.grid = {
            el: null,
            filter: 'all',
            value: '',
        };

        grid.el = new Gridifier($('.portfolio__row'), {
           grid: 'vertical',
           class: 'portfolio__col',
           filter: {
               selected: 'all',
               all: function(item) {
                   return item;
               },
               categories: function(item) {
                   if ($(item).hasClass(grid.value)) return item;
               }
           }
       });
       // grid.el.appendNew();
       grid.el.append(grid.el.collectNew());

       // Handle the filter click
       $('.filter__col li a').on('click', function(e) {
           e.preventDefault();
           grid.filter = ($(e.target).data('filter') == 'all' ? 'all' : 'categories');
           grid.value = $(e.target).data('filter');
           grid.el.filter(grid.filter);
       });
    }

});

Style:

.portfolio__row {
    @include make-row();
    padding: 15px;

    @include media-breakpoint-up(lg) {
        padding: 30px;
    }

    .portfolio__col {
        @include make-col-ready();
        @include make-col(12);
        padding: 15px;

        @include media-breakpoint-up(md) {
            @include make-col(6);
        }
        @include media-breakpoint-up(lg) {
            padding: 30px;
        }
        @include media-breakpoint-up(xl) {
            @include make-col(4);
        }

        .col__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: calc((100vw - 60px) * 9 / 16);

            background-size: cover;
            background-position: 50% 50%;
            transition: all .3s ease;

            @include media-breakpoint-up(md) {
                height: calc((50vw - 45px) * 9 / 16);
            }
            @include media-breakpoint-up(lg) {
                height: calc((50vw - 90px) * 9 / 16);
            }
            @include media-breakpoint-up(xl) {
                height: calc((((100vw - 60px) / 3) - 60px) * 9 / 16);
            }

            h3, h4, span {
                transition: opacity .5s ease;
            }
            h4 {
                margin: 0;
            }
            span {
                opacity: 0;
                color: $white;
                background-color: $black;
                text-shadow: 1px 1px 5px rgba(0,0,0,.7);
                padding: 4px 20px;
                position: absolute;
                bottom: calc(50% - 18px);
            }

            &:hover {
                h3, h4 {
                    opacity: 0;
                }
                span {
                    opacity: 1;
                }
            }
        }
    }
}

But when I filter the items the grid is flashing when the items disappears. Also I've applied the css from the documentation. The grid and columns are from Bootstrap 4.

[nix23]

Hello. Can you post full source code?
I have checked sample with Bootstrap4.0.0-beta2/Chrome 62.0 and have not noticed grid flashing.

[justkidding96]

@nix23 I've just edited my answer above. Hope you can figure this out 👍

[nix23]

Your code looks similar to this example https://codepen.io/anon/pen/EoyWXw and I cannot reproduce flickering in that example. Maybe some CSS/JS code before "portfolio" is affecting nested grid. (It is hard to tell without full minimal test case)

[justkidding96]

@nix23 The website is online now. You can see the flashing at velofilms.nl When you clicked some filters, the grid will start flashing.

[nix23]

The problem lies in this 2 lines: (looks like they are breaking parent animation)

.col__content {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

If you rm them flickering goes away. So you have 2 options here depending on your use case:

1. Rm them.(If they are not required)
2. Use required prop names instead of 'all':

.col_content {
   -webkit-transition: height .3s ease;
   transition: height .3s ease;
}