Preamble
This is a bit of a tutorial on how to do the code that's on my demo page for animating collapsibles. I'm fucking done with CSS for today.
This took up literally 6 hours of my time to figure out that I literally just had to have manual measurements. Sorry, but I can't remove that and keep them this beautiful. If you want simplicity, go use 7happy7's original collapsible animation code (Which helped a lot in making this btw. Most of the code not relating directly to the animations was copied from their page, since I was already struggling enough with even that much. Many thanks, if you happen to see this, 7happy7.
The Meaty Stuff
Anyhow, on to the juice you came here for. First, you're going to want to copy the following to the start of your page (preferably after any [[include]] blocks):
[[module css]] /* ANIMATED COLLAPSIBLE CSS */ /* Made by JaonHax */ /* If I'm not credited in your author's post, I swear to God I will find your house and give you SEVERAL stuffed animals. */ /* Don't test me. */ /* Use a tool like Ceaser (https://matthewlein.com/tools/ceaser) to make your own */ /* cubic bezier (curve) for the animation to follow, if you want to change that. */ /* Put that in the "--anim-bezier" custom property (instead of my bezier) if you do. */ :root { --anim-bezier:cubic-bezier(0.645, 0.045, 0.355, 1.000); } .collapsible-block-unfolded .collapsible-block-content { display:block!important; visibility: visible; } .collapsible-block-unfolded[style="display: none;"] { display:block!important; visibility: hidden; } .collapsible-block-unfolded[style="display: none;"] .collapsible-block-unfolded-link { height:0; } .collapsible-block-unfolded:not([style="display: none;"]) .collapsible-block-content { opacity:0; height:0; } .collapsible-block-unfolded[style="display: none;"] .collapsible-block-content * { height:auto; animation: disappear 2s var(--anim-bezier) both; } @keyframes disappear { to { opacity:0; height:0; padding:0; margin:0; pointer-events: none; } } /* Paste any code you create from the following underneath this comment */ [[/module]]
How to do the Rest of It
So basically, I was going to make a code generator, but then it wouldn't work and I can't be bothered to do MORE programming, so I'm just going to tell you how to do it yourself. Below is a list of what you'll replace with what in the following code.- [num]
- Number of the collapsible (in order from top to bottom).
- [time]
- The amount of time you want this collapsible's animation to go for. This will look somewhat like the following in format: 2s, 500ms, 4m, 0.5s, etc.
- [measure]
- The height of the collapsible's .collapsible-block-content div (or the height from the top of the first collapsible line, not including the link, to the bottom of the last collapsible line in px, pt, em, or rem). I recommend using a pixel measurement tool like Page Ruler Redux (Chrome extension) that can get you pixel-perfect measurements. This will get you the best results in the long run.
- var(—anim-bezier)
- If you want to have a cubic-bezier specific to this collapsible and know how to mess around with that so it fits what you want it to do, by all means, I'm not stopping you!
/* Identifies the collapsible and assigns the DISappearing animation */ #page-content .collapsible-block:nth-of-type([num]) .collapsible-block-unfolded[style="display: none;"] .collapsible-block-content { height: [measure]; opacity:1; animation: disappear [time] var(--anim-bezier) both; } /* Identifies the collapsible and assigns the appearing animation */ #page-content .collapsible-block:nth-of-type([num]) .collapsible-block-unfolded:not([style="display: none;"]) .collapsible-block-content { animation: appear-[num] [time] var(--anim-bezier) both; } /* These are the animation keyframes. Feel free to edit these to better fit your collapsible and timing. This is just what I've found to work best. */ @keyframes appear-[num] { from { opacity:0; height:0; } 50% { opacity:0.8; } to { height: [measure]; opacity:1; } }
And that's it! If you want fully well-animated collapsibles on your page, you've got them now! I know it's really a lot of code, and I could probably shorten it by making the first part an [[include]] component on my wiki, but I really can't be bothered to mess with this any more today. I'll do it tomorrow.
And no. I'm not animating the collapsible on this page. I'm done with this code for at least the next week, and CSS itself for at least today. No animation here.