Add css transition while filtering

Question

I have created the above filtering where the user clicks on the buttons and the items are filtered. I am trying to add also a smooth transition, by my example don't want to cooopeate :)

I added transition: all 10.3s ease; on my class but it didn't worked.

What I am missing here ? Thanks !

$("#filter button").each(function() {
  $(this).on("click", function() {

    var tags = [];
    var filtertag = $(this).attr('data-type');
    tags.push(filtertag);
    console.log("filtertag = " + filtertag);
    if (filtertag === 'all') {
      tags = [];
      $('.record').removeClass('d-none');
    } else {
      $('.record').addClass('d-none');

      for (let i = 0; i < tags.length; ++i) {
        $('.record.' + tags[i]).removeClass('d-none');
      }
    }
  });
});

.d-none {
  display: none;
}

.d-inline {
  display: inline-block;
}

#filter {
  margin-bottom: 20px;
}

.list_right {
  color: white;
}

.record {
  padding: 10px 10px;
  margin-bottom: 20px;
  background-color: blue;
  transition: all 10.3s ease;
}

Brebber · Accepted Answer

You missed:
Property display: none CAN NOT be animated and not used with css transition smoothly

Explanation:

That is because a transition needs to have values is can change 'step by step' spread all over the transition-time.

Possible standard approach: reducing to zero height instead of display: none:

On approach is to fade out and 'remove' an element by reducing it to zero height. Demonstration see example below this posting. BUT HEAD UP: as you see in the example that needs a fix height set to the element which will be reduced. It does NOT work with auto or min-height for property height.

Maybe better approach to your project: change html structure to grid:

To smooth remove / reduce an auto-sized-height element (I assume that is what are you looking for) you can use another html structure. If you can work with grid in this case you can easily smoothly reduce an auto-height-row by using transitions.

Yesterday we had a demo on this working horizontal. But same mechanic works on vertical structure as well. If you like you may have a look to that different horizontal example here:

https://stackoverflow.com/a/66742338/9268485
(Note: transitions in that example works on hover!)

Explaining example to approach 1:

        $("#filter button").each(function () {
            $(this).on("click", function () {

                var tags = [];
                var filtertag = $(this).attr('data-type');
                tags.push(filtertag);
                console.log("filtertag = " + filtertag);
                if (filtertag === 'all') {
                    tags = [];
                    $('.record').removeClass('d-none');
                } else {
                    $('.record').addClass('d-none');

                    for (let i = 0; i < tags.length; ++i) {
                        $('.record.' + tags[i]).removeClass('d-none');
                    }
                }
            });
        });

        .d-inline {
            display: inline-block;
        }

        #filter {
            margin-bottom: 20px;
        }

        .list_right {
            color: white;
        }

        * {
            box-sizing: border-box;
        }

        .record {
            height: 38px;
            padding: 10px 10px;
            margin-bottom: 20px;
            background-color: blue;
            transition: all 5s ease;
        }
        .d-none {
            height: 0;
            padding: 0 10px;
            margin-top: 0;
            margin-bottom: 0;
            opacity: 0;

            transition: all 5s ease;
        }

Add css transition while filtering

Answers (1)

Related Questions