Ember : classNameBinding for a component - class is added, but CSS transition is skipped

Ember (latest) classNameBinding for a component - class is added on didInsertElement(), but CSS transition is seemingly skipped.

When I add and remove the class in dev tools or comment out the loaded class in the stylesheet the animation occurs, but otherwise - when the element is inserted it just goes from 0 to 100 immediately.

Here is a full example in an ember-twiddle

example-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: ['example-component'],
  classNameBindings: ['loaded'],

  loaded: false,

  didInsertElement() {
    this.set('loaded', true);
  },
});

CSS

.example-component {      
  opacity: .1; /* so you can see it */
  transform: translate(0, -100px);
  transition: 3s;
}

.example-component.loaded {
    opacity: 1;
  transform: translate(0, 0);
}