Caveat emptor folks... Let me start off by putting my hands up and saying I am no expert on CSS. And furthermore let me say that this blog post is essentially the distillation of a heady session of googling on the topic of CSS transitions. The credit for the technique detailed here belongs to many others, I'm just documenting it for my own benefit (and for anyone who stumbles upon this).
Behind the scenes of
"CSS Transitions make style animation trivial for everyone, but they also are a smart performance feature. Because a CSS transition is managed by the browser, the fidelity of its animation can be greatly improved, and in many cases hardware accelerated. Currently WebKit (Chrome, Safari, iOS) have hardware accelerated CSS transforms, but it's coming quickly to other browsers and platforms."
This is the CSS we'll need:
Note we have 2 CSS classes:
fader- if this class is applied to an element then when the opacity of that element is changed it will be an animated change. The duration of the transition and the timing function used are customisable - in this case it takes 0.7 seconds and is linear.
fadedOut- when used in conjunction with
faderthis class creates a fading in or fading out effect as it is removed or applied respectively. (This relies upon the default value of opacity being 1.)
Let's see it in action:
It goes without saying that one day in the not too distant future (I hope) we'll be able to leave behind the horrible world of vendor prefixes. Then we'll be down to just the single
transition statement. One day...
Unfortunately the technique detailed above differs from
fadeOut in one important way. When the
fadeOut animation completes it sets removes the element from the flow of the DOM using
display: none. However, display is not a property that can be animated and so you can't include this in your CSS transition. If removing the element from the flow of the DOM is something you need then you'll need to bear this in mind. If anyone has any suggestions for an nice way to approach this I'd love to hear from you.
A halfway there solution to the
Andrew Davey tweeted me the suggestion below:
— Andrew Davey (@andrewdavey) December 5, 2013
So I thought I'd give it a go. However, whilst we've a
transitionend event to play with we don't have a corresponding
transitionbegin. So I tried this:
Essentially, on the
display: none is applied to the element in question. Groovy. In the absence of a
transitionbegin, when removing the
fadeOut class I'm first manually clearing out the
display: none. Whilst this works in terms of adding it back into the flow of the DOM it takes away all the
fadeIn gorgeousness. So it's not quite the fully featured solution you might hope for. But it's a start.