CSS transition when parent class changes?

Question

I'm using a CSS parent class to define multiple layouts for some data. When I change the parent class, the layout changes perfectly as desired, however I thought it may be fun to add some CSS animations (transitions). I can't seem to get it to work though. I found one other similar question, but it has no answer, and it's not exactly the same (or as straightforward).

Here is the fiddle: http://jsfiddle.net/scottbeeson/wmK2F/1/

I don't really care what transitions right now; height, width, color, whatever. Once someone shows me what I'm doing wrong I can tweak it.

HTML:

<div id="toggleLayout">Click To Toggle</div>
<div class="layout layoutCards">
    <span class="entity">
        Test
    </span>
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
</div>

CSS:

.entity { /* animate */
  -webkit-transition: height .5s linear;
  -moz-transition: height .5s linear;
}

.layoutCards .entity {
    display: inline-block;
    border: 1px solid blue;
    margin: 5px;
    height: 100px;
    width: 100px;
}

.layoutList .entity {
    display: block;
    border: 1px solid blue;
    margin: 5px;
    height: 20px;
}

Answer 1

You are changing the display of the element from inline-block to block. You cannot transition such a change. You could easily just make the display of both the same; however, that eliminates the desired behavior.

As opposed to manipulating the elements via the display property, you could swap display:inline-block out for float:left, set float:none, on the second element, and keep display:block. This seems to work. jsFiddle here, but it doesn't produce a nice animation due to the radical changes..

.layoutCards .entity {
    float: left;
}

.layoutList .entity {
    float: none;
    display:block;
}

Alternatively, you could also just set display:block on both. Producing this - example here.