- From: Tobias Ritzau <tobias@ritzau.se>
- Date: Thu, 27 Jun 2013 11:53:07 +0200
- To: www-style@w3.org
- Message-ID: <CALYHq=1A+rpFm3RGvs-ToKajM2y11yn=DLDrWKHEhoKSpwkoNQ@mail.gmail.com>
Ok, thanks! Great info :) I'm slowly getting this... Please help me understand. Given that I want to fade in a "display: none" element, even if the opacity is set it is not computed by most UAs (since it is not displayed). To be sure to get the transition I first set display to something else (e.g. block), then I request the value of the opacity to compute it (ok, tried this and I had to request the computation to get it working, see below), then I set the new value and the transition properties. To make sure I understood this... Here is a sample I tested succesfully in chrome: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Fade</title> <style> .hidden { display: none } .start { opacity: 0 } .transition { opacity: 1; -webkit-transition: opacity 1s } </style> </head> <body> <div id='div' class="hidden">Test</div> <script> var elem = document.getElementById('div'); function ontransitionend(event) { elem.className = null; elem.removeEventListener('transitionend', ontransitionend); } elem.addEventListener('transitionend', ontransitionend); elem.className = 'start'; window.getComputedStyle(elem).opacity; elem.className = 'transition'; </script> </body> </html> Now, is the fade in guaranteed to happen? -- Tobias
Received on Thursday, 27 June 2013 09:53:35 UTC