W3C home > Mailing lists > Public > www-style@w3.org > June 2013

[css3-transitions] Transition from display: none

From: Tobias Ritzau <tobias@ritzau.se>
Date: Tue, 25 Jun 2013 15:47:38 +0200
Message-ID: <CALYHq=2PMJ0vaeHsA1EatiVCEXN0yVjmFKT7Qa_1SZc1u7mZLw@mail.gmail.com>
To: www-style@w3.org
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC