CSS transition not working for percentage height?

CSS transition not working for percentage height?

I have the following CSS definitions:

.detailsCollapsed  {     display:none;     height:0%;     width:100%;     -webkit-transition:height 40s ease-in-out;  }    .detailsExpanded  {      display:block;      visibility:visible;      height:100%;      width:100%;      -webkit-transition:height 40s ease-in-out;  }  

These are applied to a div with some content inside of it.

I also have some javascript that when a div is clicked it changes the class name on the element. This works fine for expanding and collapsing but there is no animation on the iphone? (All other transitions I tried work fine with fluid animation) Any ideas?

Answer by Nicholas for CSS transition not working for percentage height?

It is the change from display:none to display:block that is stopping the transition. Try setting the collapsed style to display:block; height:0; overflow:hidden;

Note: a expanded height of auto will also stop the transition. If there is no height set on the containing block then a height of 100% is equal to a height of auto.

Answer by onreachable for CSS transition not working for percentage height?

The (pure CSS) solution so far

If you leave height:auto; and use fixed values of max-height you can simulate a transition:

.detailsExpanded {      max-height: 300px; /* Guess a max-height for your content */  }    .detailsCollapsed {      height: auto;      max-height: 0;      transition: max-height 500ms ease-in-out; /* Pick a duration based on the max-height used */  }  

Pay attention to the transition duration and max-height when the element is expanded. Adjust it until you get the wanted behavior.

This way you can get a transition between two defined values (0 to 300 in the above example) while the height property will 'follow' the transition until it gets the content's size.

Demos

The first demo is a working example of this solution.

The second demo just demonstrates what's happening in the first demo.

Understanding the problem

For now transitions works only between predefined values and we can guess why...

Well, I can't tell why this is not supported yet, but IMHO it will be a very tricky CSS feature to implement. When non-predefined values are involved, like auto or 100% first the rendering engine needs to know both the starting and the ending point to calculate all values the property being animated will assume during the interpolation. However those values are dynamic, each step of the transition may change the starting or ending point and make their values to be recalculated resulting in new interpolation values (i.e may result in choppy or random transition).

Not to mention that each of these calculations would require several reflow operations which can be very expensive in some situations.

Like fabb said, the CSS transitions spec determines that percentage values should be supported, so it's just a matter of time. However, I'm not sure about what will happen to auto values in transitions.

Answer by Adrian Ghizaru for CSS transition not working for percentage height?

Hopefully you've worked around this already, but I'm just writing to say I ran into the same problem: WebKit, at least on iOS 4.1, will not animate a transition if it was defined on an element styled with "display: none;", just like Nicholas mentioned above.

If your concern in not rendering this element is performance, like in my case, then I propose another solution than setting the height to 0. In your body's onLoad event callback, save the element in a variable and remove it from the DOM. Then re-insert it when it comes time to show it.

Answer by DDTech for CSS transition not working for percentage height?

i had the same issue. Transition worked fine when "collapsing", but appeared with no transition (like being "switched on") on "expanding", when "display:none" was set before.

I accidentally came to a working solution while debugging: simply querying the "offsetHeight" seems to force an internal re-render of the element.

something like this:

    showElement = function(){         ...         oEl.style.display = "block";         var xDump = oEl.offsetHeight;         oEl.className = "show";      }  

xDump is never used, but having it, made the differnce.

Answer by Christian for CSS transition not working for percentage height?

I've used the following solution for elements where i need to toggle between display none and block, and keep the transition effect:

function slidedown(element) {      ...      element.style.display = "block";      var timerId = setTimeout(function(){          element.style.webkitTransitionProperty = "height";          element.style.webkitTransitionTiming = "linear";          element.style.webkitTransitionDuration = "3.5s";          element.style.height = "500px";      }, 0);      ...  }  

the setTimeout function will force a short delay allowing the transition to occur after toggling the display property. Hope it helps.

Answer by fabb for CSS transition not working for percentage height?

According to the W3C Spec on CSS3 Transitions, both length and percentage should be allowed for a transition on the property height. So I guess it's just a matter of time until providing a percentage is supported in browsers.

Answer by JCBrown for CSS transition not working for percentage height?

Here is a solution for those who want to use percentages.

The trick is to contain it inside a div with a set height and width. If you are floating container div's this may not be ideal, but if you are absolutely positioning containers this should work pretty good and as long as elements are not overlapping each other.

here is the code

.container {      width: 500px;       height: 500px;       background: transparent;  }  .expand-content{      height: 0%;       color: #fff;      background: green;  }  .expand-content:hover {      height: 100%;       background: orange;      transition: all 2s ease;  }  .expand-content p  {      font-size: 35px;       text-align: center;       }

      
          
Expanded Content
      
  

on JSFiddle: http://jsfiddle.net/jtZ8j/7/

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72