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;
Any assistance would be appreciated.
17 Replies
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.
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"
Now it works, I forgot to tell you about the
transition-behavior: allow-discreteSorry Lko, my issue is with Firefox, "transition-behavior: allow-discrete" & "@starting-style" are not yet available features
Firefox is only 2% of users on the internet just saying
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.
Thanks for your kind feedback.
So 98% of internet users don't care about security, privacy and tracking....interesting numbers
This is much to do about nothing in the context of making progressive enhancements. Just the facts.
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
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)
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.
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.
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.
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.
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
https://caniuse.com/?search=grid%20template%20animation Looks like FF finally did get animated grid tracks too
probably the best option 🤷♂️
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)
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 🥲
Been kinda hoping someone smarter than me had a good solution but alas here we are.
Be nice if 0fr didn't need more than one row/col to work but makes sense why it wont ig..
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 CSSFind out how to easily transition to intrinsic sizes and trigger transitions when an element receives its first style update using new CSS features.
single grid though (not a child grid like in the example I used)... I might revisit this more later 🤔
Ah it can't have any padding and children need
min-height: 0; is how 🥲 (least I know its possible now to animate with a single 0fr..)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).
Now that is cool!
Never considered using CSS Grid as a data table......
Many thanks for pointing in this direction!
Couldn’t you wrap a regular
table in a grid container, give it and its children if needed a min-height: 0;? 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