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