Can't transition padding
The base problem I'm trying to solve is I have an element that I want to be able to click on, and then a second element appears to side down from behind, all simple divs with text inside each. Best I can tell, the best way to do this to make things a grid and transition on the
grid-template-rows. That part of the transition worked fine, but because I was using a negative top value + a padding top of the same value, padding would just appear, then the height transition. So I tried to transition on padding-top as well, but it didn't work.
I created a JSFiddle showing my code: https://jsfiddle.net/ftgu7zc1/1/
Any suggestions on how to fix this bliping? Should I be using something other than negative top/positive padding top to make it look like it's coming down from behind?Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
104 Replies
have you considered using
<details>?I was unfaimilar with it until now, and happy to give it a got. But won't I hit the same transition issues?
yes and no
but mostly yes
but it will work a lot better in many aspects
for example, the div is still searchable when hidden
Oh, nice. Not super useful to my current application, but nice none the less
the correct solution still has less-than-adequate support
Is that transition behavior?
yup
Yah, that's where I started
and transition from 0 to auto
Yah
Ok, I'm trying right now to update my fiddle and I'll respond once I do
you do have the option to use js to do all the transitioning too
Do you mean clarifying on that? You mean not use css transitions?
I havne't kept up with js as much
yeah, it is a solution
But I can certain google it
it's a pain in the ass
I don't mind JS, just trying to learn what I should be moving from JS to css
this is something that should be done in css, if you can live with no transitions for browsers that don't support it
Unfortunately, I prefer firefox (this is for a personal project) and I can see transition behavior has limited support in firefox
I'm relearning frontend right now, starting with react, so I'll have to figure out what JS tools/code will help with the transition part
one of them is "raf" - request animation frame
you use it to calculate the animation yourself from js
Thanks, I'll start there
i personally recommend that you keep this css-only
I'll consider that. I'm trying to learn more for a larger site I run, and about 30% of the users there are firefox, so it wouldn't be a viable option for that one.
currently, it isn't
Actually, would you mind helping me with the transition behavior? I'm trying it now on the fiddle on chrome, and the padding is still failing.
it's not
it's the height that is changing
Oh, right, I need to drop the grid technique
when you add/remove the
grid-template-rows: 1fr;, you are changing the height
you have to transition the height, otherwise it will always poke from under the parent
or will look weird as hellOk, let me try that out
transition from 0 to auto
Sorry, I can't seem to get it working. I hope you don't mind taking a look? https://jsfiddle.net/ftgu7zc1/2/
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Just have to jump in and say that GamersPlane is the best PbP site I’ve ever used. Haven’t used it in years but I have fond memories! Glad to see you’re still up and running!
Oh, thanks! Depending on how far back, there'have been improvements thanks to a volunteer who added a bunch of customization to character sheets, and this whole "learning modern css" thing is so I can make better progress into a v2 site.
Thus trying to learn transitions, and failing miserably at it 😛
Back then I was a member of the RPG Academy network. So that might tell you how far back lol
Ah yah. Though RPGA is still going strong as well.
That’s good to hear! I was the co-host on SharkBone
!
Obviously not going to use RL names here, but of course!
That was a bit ago 🙂
I think I went by EldritchFire back then. Have had a lot of handles, though, so maybe not lol
Yup, I remember, I think it was a slight variation of that, but I could be wrong as well
Gotta go drive home, but I’ll take a look at your issue later if I have time!
No worries, and thanks. I'm gonna rebuild it from the ground up in case I broke stuff midway
Ok, this is the latest, https://jsfiddle.net/ftgu7zc1/3/, but still can't get allow-discrete working on chrome
Is padding a transitionable property? I can't seem to get it working, even from absolute value to absolute value.
yes, you can transition padding
A few small changes to the CSS:
however, it won't be enough, as the element will poke under the other one because the height is too high
Here's a very rough draft using the
details element and CSS transitions
https://codepen.io/13eck/pen/xbbvNvGIt's kinda ugly right now as the border radii are not 100% in sync…
Changed the border radius to
px instead of em and it looks a lot better now >_>Hm... I'm on chrome 127, and it doesnt' animate... plus I was reading about how the max height trick requires you have an approximate value for what your height may be, or you get timing issues (since it'll continue animating even after you hit the content height.
And I'll try animating padding again
For some reason, I cant get that working
I think I've gotten a good idea of the state of transitioning right now. I wish I could find any info on the state of transition behavior with FF, as the mdn docs say it supports it, but can i use says it doesn't? Or maybe that's only for allow-discrete
So either it's grid hackiness or javascript for now
I'm using Chromium 135.0.7049.95 currently
Oh, am I that far behind? Stupid Ubuntu
And the max-height trick is an issue when you try to animate both ways. But my code is animating only open, so when it closes it goes straight to
height: 0;I got the grid vartiant working both ways (by putting the content in a div inside the cell div)
So I may keep with that for now while I wait for FF to get with the times
lol
/sigh FF
Me personally wants to never use Chrome again... me developer knows I can't do that.
I would just like more parity between Chrome and FF
I'm so anti-chrome I use Ungoogled Chromium for my dev browser and Orion (macOS/iOS only currently) as my daily driver
I also have FF just 'cuz :p
I've seen orion, but as I'm a linux user, it's not an option atm. Never heard of ungoogled Chromeium, but I'll take a look
If it works it works. Just don't use a
button where you should use an a and vice-versa and it's all kosher
It's Chrome with all the Google Tracking ripped outYah, lets see it's state on ubuntu
Which does cause some problems occasionally when a link relies on Google tracking for something
But I can watch YouTube, view GoogleDrive folders, etc with no issue
Makes sense
Is the animation you're working on for the
spoiler tag inside a post?I would use grid for this and transition the grid-template
the support will be better, until calc-size() is
Of course you'd use grid 🙄
Where's the codepen, b1? I wanna see the magic of grid!
-# also, notice how I didn't suggest using flexbox? 🤣
because flexbox cant do this
😉
or you would have
I'm sure I could make it happen lolol
here is a pen I made for someone else that needed a table
What? No. Semantic HTML, my dude. If it quacks like a
details element it's a details element :pI'll simplify it if I need to but can't atm.
Ok, that is pretty cool
custom props with fallbacks is ❤️
Oh here was another I did in the past lol
This is where I got it working: https://jsfiddle.net/ftgu7zc1/4/
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
I would prefer to use details or something more semantically correct, but for this use case, doesn't quite fit
I'd prefer for FF to get their act together (interestingly, I recently applied to a job at Mozilla :D) and use correct sematnics
Mozilla don't give a f about making a good browser anymore
marketshare of 2% does not help they lost so many users
Yah...
Long as its not unreadable unfunctional on FF its fine
Agreed
progressively enhance the 98% of your users
But as a backend who can't always keep up with what's going on in FE-land, I end up relyin on JS for a lot 😛
Sometimes you just gotta JS it up
not wrong but also cursed
And it’s not like your users will have JS disabled
Oh, totally agreed
It has far less to do with being disabled but not loading
Fair
mr I still put links in ul should understand this
🥲
"what if css don't load"
>.>;;
FE's just not my focus, so I do what I can 🙂 And should I ever get a project going far enough, I'll look to find/hire a FE to make my stupid FE more modern friendly
Something something style element
:p
SPANS EVERYWHERE!
Do browsers still support
marquee or blink? I remember those being populardepricated
but only one letter at a time
-# link to Kevin's video on Figma Sites and how the last letter of all
divs are in a span for some reasonHaha, now we're back to the days of dreamweaver, huh?
Pretty much, yeah
Man, the HTML those wrote...
You think you're bad at front-end? Those people are "professionals" and your HTML is better than theirs!
Oh, I'm not bad at FE, I'm just not up to date on FE. Joking aside, my problem is just not knowing what features are viable vs what features are coming up.
I need a caniuse but from the functional level rather than spec level
canimake?
I saw Kevin's catchup video I think he said he's going to do quarterly? I need that but in searchable form
All you need to do is know what you don't know then look it up on MDN. Easy peasy! lol
Other than things like mdn saying it supports transition behavior (which technically it does), but not allow discrete, which is the entire point!
you can still use semtantics btw just make your details a grid 🥲
That... that hurts
Ok, time for me to learn pygame... I need to make a video game where you walk into a development office and defeat engineers with bad development takes, doing various amounts of psychic damage as you tell them things like "Just make your span a block level element"
You wouldn't need JS at all in that case? damn now I need to make a codepen
Yah, no js needed 😄 I tried it yesterday, it just didn't style the way I wanted.
It would work great for other usecases though