Initial content in tab pane doesn't fade in

Created by: tomkel

According to the docs, one should add the class .in to a tab pane to fade in initial content. However, this doesn't happen.

v3: http://jsbin.com/yiyidawipo/1/edit?html,output v4: http://jsbin.com/pejehozisa/1/edit?html,output

Instead, "Hello, world!" appears without any initial fade-in.

The .in definition appears in component-animations.less as

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

This doesn't work for the initial content, as shown above. However the following example shows that changing the opacity via javascript does allow the initial content to fade in correctly. http://jsfiddle.net/SO_AMK/a9dnW/