You can build accordions in a bunch of ways. This demo combines a bunch of concepts that I'll talk about below. ⚠️ If you open Chrome's DevTools and enable Paint flashing before toggling the demo, note that this paragraph doesn't flash: we've given it its own layer via will-change: transform. I'm going to cover some nuances on this, but the short version of this post is: for a few seconds, it's probably fine, even if you're animating the height (or friends) property to do so. This just means an element which open and closes vertically with an animation. This post is just some simple thoughts on animating a humble box as an accordion. set will-change when a layer is going to change regularly, keeping it "promoted"ĭoing these two things keeps your animations 'cheap', because your browser doesn't have to redraw anything during the animation.only animate the GPU-accelerated CSS properties opacity and transform and.
How I Learnt To Stop Worrying And Love Animating The Box ModelĪs someone who likes to animate things on the web, my general rule of thumb has always been:
0 kommentar(er)
