Show and Hide table row with animations

Have been struggling for a couple of days now trying to implement animations on showing and hiding table row....

Animation is working on the show keyframe.

Code sample;

tr.row-hidden {
  display: none;
  opacity: 0;

  animation: hide 2s;
}

tr {
  display: table-row;
  opacity: 1;

  animation: show 1s;
}

@keyframes show {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: table-row;
    opacity: 1;
  }
}

@keyframes hide {
  from {
    display: table-row;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}

tr.row-hidden {
  display: none;
  opacity: 0;

  animation: hide 2s;
}

tr {
  display: table-row;
  opacity: 1;

  animation: show 1s;
}

@keyframes show {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: table-row;
    opacity: 1;
  }
}

@keyframes hide {
  from {
    display: table-row;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}

Any assistance would be appreciated.

Fferret13 Have been struggling for a couple of days now trying to implement animations on ...

lko•12/8/24, 1:22 AM

It's because you can't transition from display none to another type of display. Until recently, take a look at this:

https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style#transitioning_elements_on_dom_addition_and_removal

MDN Web Docs

@starting-style - CSS: Cascading Style Sheets | MDN

The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.

ferret13OP•12/8/24, 1:57 AM

Many thanks.

Tried this also and no success, display the table with animation is working perfectly, just not working going from "display: table-row" to "display: none"

Fferret13 Many thanks. Tried this also and no success, display the table with animation i...

lko•12/8/24, 7:52 AM

https://codepen.io/Lko3001/pen/xbKVWyp

CodePenLko

Transition Display None

...

lko•12/8/24, 7:53 AM

Now it works, I forgot to tell you about the

ferret13OP•12/8/24, 12:10 PM

Sorry Lko, my issue is with Firefox, "transition-behavior: allow-discrete" & "@starting-style" are not yet available features

b1mind•12/8/24, 9:11 PM

Firefox is only 2% of users on the internet just saying

b1mind•12/8/24, 9:12 PM

You could make it work for all the others and just make sure it displays proper without the animations on FF then when it does support it, it will just work. Progressive enhancements with fall backs is the way.

Bb1mind Firefox is only 2% of users on the internet just saying

ferret13OP•12/8/24, 10:27 PM

Thanks for your kind feedback.

So 98% of internet users don't care about security, privacy and tracking....interesting numbers

Fferret13 Thanks for your kind feedback. So 98% of internet users don't care about securi...

b1mind•12/8/24, 10:31 PM

This is much to do about nothing in the context of making progressive enhancements. Just the facts.

b1mind•12/8/24, 10:32 PM

If people really cared they would be more aware of things like Solid protocol and owning their data too. But alas users do what users do. Side note faik Edge supports just as much security features as FF

b1mind•12/8/24, 10:35 PM

Keep in mind too FF usage goes even lower when you account mobile users (because their mobile browsers used even less like 0.55% of users)

b1mind•12/8/24, 10:36 PM

Mozilla as a company is being pretty crappy too, more and more comes out about it. So I wouldnt be on such a high horse about it.

b1mind•12/8/24, 10:38 PM

https://gs.statcounter.com/ Incase you don't believe me about usage. But I would always rely on your own site metrics and know your users.

b1mind•12/8/24, 10:40 PM

https://gs.statcounter.com/browser-market-share/mobile/worldwide

StatCounter Global Stats

Mobile Browser Market Share Worldwide | Statcounter Global Stats

This graph shows the market share of mobile browsers worldwide based on over 5 billion monthly page views.

ferret13OP•12/9/24, 12:02 AM

This conversation is drifting away from the topic.

I am seeking a solution and/or workaround and/or assistance that works on all browsers, as developers we should not write code that only works on some browsers and then ram our opinions/preferences down the throats of the users.

Fferret13 This conversation is drifting away from the topic. I am seeking a solution and/...

b1mind•12/9/24, 12:20 AM

You can animate the height but just know its really bad for performance and typically not recommended.

another options is to use Grid as a table and you will have more flexibility to use things like translate/scale maybe

https://codepen.io/charleslcsantos/pen/YVYXOG?editors=0110

CodePenCharles Lennon

Show/Hide a table with animation

...

b1mind•12/9/24, 12:28 AM

https://caniuse.com/?search=grid%20template%20animation Looks like FF finally did get animated grid tracks too

b1mind•12/9/24, 12:28 AM

probably the best option

b1mind•12/9/24, 2:23 AM

Meh even that is not a great option maybe... had a chance to play around because I need more experience with this as it newer too. (forked a responsive grid-table, and hacked at it real fast not a production or complete example)

https://codepen.io/b1mind/pen/LEPNaLz?editors=0110 (deleted, refer to one below)

b1mind•12/9/24, 2:25 AM

Issue is you either have to animate the parent grid template or you have to give more strict values to animate (just like height would be). Its better perf but

. Really we have all bee waiting for animating display: none; for this very reason and FF is just behind. It is the best way

b1mind•12/9/24, 2:25 AM

Been kinda hoping someone smarter than me had a good solution but alas here we are.

b1mind•12/9/24, 2:44 AM

Be nice if 0fr didn't need more than one row/col to work but makes sense why it wont ig..

b1mind•12/9/24, 2:53 AM

https://blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-css mmm Zoran has it working with only one...

CSS Weekly's Blog

Transition to `height: auto` & `display: none` Using Pure CSS

Find out how to easily transition to intrinsic sizes and trigger transitions when an element receives its first style update using new CSS features.

b1mind•12/9/24, 2:55 AM

single grid though (not a child grid like in the example I used)... I might revisit this more later

b1mind•12/9/24, 4:11 AM

Ah it can't have any padding and children need is how

(least I know its possible now to animate with a single 0fr..)

b1mind•12/9/24, 4:41 AM

https://codepen.io/b1mind/pen/gbYryRb cleaned it up some so it has padding (on grandchildren p) done for now I'm happy, decent replacement for display: none; that works in all browsers and its more responsive using grid even though they use the same technique I would with a table (using data attributes for titles/thead).

CodePenBrent Morton

CSS Grid Animate template rows table

...

Bb1mind https://codepen.io/b1mind/pen/gbYryRb cleaned it up some so it has padding (on g...

ferret13OP•12/9/24, 9:59 AM

Now that is cool!
Never considered using CSS Grid as a data table......
Many thanks for pointing in this direction!

snxxwyy•12/9/24, 10:31 AM

Couldn’t you wrap a regular

table

table

in a grid container, give it and its children if needed a ? That way you keep the baked in semantics? I’m pretty sure toggling the row size as you’re doing would still make it work the same? Haven’t tested though