开发者

CSS3 Transitions on reflow

开发者 https://www.devze.com 2023-02-25 15:32 出处:网络
Take this dom as an example. <div id=\"container\" style=\"transition: width 1s ease-in-out;\"> <div style=\"width: 400px; display: none;\"></div>

Take this dom as an example.

<div id="container" style="transition: width 1s ease-in-out;">
  <div style="width: 400px; display: none;"></div>
  <div开发者_JS百科 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.


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?

0

精彩评论

暂无评论...
验证码 换一张
取 消