Question

Take this dom as an example.

<div id="container" style="transition: width 1s ease-in-out;">
  <div style="width: 400px; display: none;"></div>
  <div style="width: 200px;"></div> 
</div>

If I alternate which inner div is hidden, can I trigger the CSS3 transition (via reflow)? If this were possible, I could add many inner divs and alternate between them smoothly without having to know what size they were.

Answer 1

I wouldn’t think it’s possible via CSS alone – transitions are not inheritable, so they would have to be applied to the nested elements in question, and a width transition couldn’t be applied without the width anyway so e.g. the nested div would need it’s width and 0 set to transition between them either on a hover or a JS click or some event

however I think I really am failing to understand the question;

#container div {transition: width 1s ease-in-out;}

would apply it to all child divs then you just toggle the display and width however you’re thinking of doing it anyway?