[css3-transitions] Transition from display: none

Hi all, it seems as all major implementations of
http://www.w3.org/TR/css3-transitions/ handle transitions from "display:
none" the same way: there is no transition. That cause code that, as far as
I can see, get complex for no reason. I can't trace this to the spec. Is it
in there?

What is the intended way to fade in an element that has display set to
none? What I have done is to first set display to what ever that should be
(and opacity to 0), and then using requestAnimationFrame() I have set
opacity to 1.

In pseudo code (pre-condition elem has display: none set, and
transition-property includes opacity):
  elem.opacity = 0
  elem.display = 'block'
  requestAnimationFrame(() => elem.opacity = 1)

Is this guaranteed to work? In some cases I have seen code that puts the
above block inside a call to requestAnimationFrame(). Is that necessary?

This is what I want to write instead:
  elem.opacity = 1  // Animated
  elem.display = 'block'  // Set directly

Note that I don't want to animate the display property! That has no valid
from state, I understand that.

Cheers!
Tobias

Received on Tuesday, 25 June 2013 14:45:06 UTC