CODEWITHSUNDEEP
javascriptjqueryhtmlcss
progrAmmar
progrAmmar

Reputation: 2670

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).

Upvotes: 1

Views: 57

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

.display{
  background-color: #a17917;
}
.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: all 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;
}

DEMO HERE

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11496

DEMO

.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: all 3s ease /* change this */
}

Upvotes: 0

Phil
Phil

Reputation: 164881

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/

Upvotes: 0

Related Questions