具有初始CSS属性值的过渡

Question

Suppose I have the follow transition on height attribute -

.testDiv {
    height : 400px ; 
    -webkit-transition: height 2s,  -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition:  height 2s, transform 2s;
}

.testDiv.hide {
    height : 0px ;
} 

Here is its jsFiddle demo

Now , I want to get the same transition - from height 0px to 400px , but such that it would start with height:200px immediately and will make animation on its rest - (from 200px - 400px ) ,

ie -

1. on start - height:0px

2. once clicked -

   2.1 height:200px immediatly

   2.2 height:200px to height:400px with transition .

How to get it ?

Answer 1

Add min-height

min-height: 200px;

http://jsfiddle.net/8bbo9cfz/2/