Re: [css3-transitions] Transition from display: none

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