progrAmmar progrAmmar - 1 month ago 16
CSS Question

CSS property transition fails

I have

div
elements with multiple classes in my webpage. The multiple classes are just to be able to easily manipulate in jQuery based on the nature of the div.

I am expanding and collapsing the div on button click event. Which works fine, but for some reason transition is not working.

I have created a Fiddle for it, please Click here to check out the fiddle.

I have seen examples of
transition
, my question is should transition be always on top level identifiers?
such as
div
or
element-id
.

My Css kind of looks like this (also available in fiddle)

.display{
background-color: #a17917;
} /* DIV */
.mytable td div.data-div{
min-height:120px;
max-height:140px;
min-width:120px;
max-width:140px;
border: 1px solid black;
overflow:hidden;
position: relative;
transition: height 3s, width 3s;
}
.mytable td div.collapse{
min-height:120px;
max-height:140px;
min-width:120px;
max-width:140px;
}
.mytable td div.expand{
min-height:300px;
max-height:300px;
min-width:300px;
max-width:300px;
}


On button click, I just add the expand class to div and remove the collapse class (after checking if the div is already expanded or not).

Answer

You have a transition for height and width but you never change those properties. Easiest thing I can see is to transition all properties

transition: all 3s;

https://jsfiddle.net/qvgLLe5k/6/