Animating toggling of a view

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars">
    <p>How to animate a view being shown/hidden when it's inserted or removed?</p>
    <p>
        We can hook into <code>didInsertElement</code> to animate the insertion,
        but how to animate when it's removed?
    </p>
    
    <p>
        We can listen for <code>willDestroyElement</code> but we can't animate on this
        as the element is removed straight after without giving the animation time to run.
    </p>
    
    {{view App.Toggler}}
    
    {{#if App.thingShowing}}
        {{view App.TogglerContents}}
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="toggler-contents">
    <p>Toggled Contents</p>
</script>

<script type="text/x-handlebars" data-template-name="toggler">
    <p>Clicking this will toggle the contents:</p>
    <button {{action toggle}}>toggle</button>
</script>

CSS

p {
    padding: 10px;
}

.toggler {
    margin: 10px;
}

.toggler-contents {
    margin: 10px;
    padding: 10px;
    border: 1px solid #CCC;
}

JavaScript

// Please change the info and fork this example
App = Ember.Application.create({});

App.Toggler = Ember.View.extend({
    templateName: "toggler",
    classNames: ["toggler"],
    toggle: function(e) {
        App.set("thingShowing", !App.get("thingShowing"));
    }
});

App.TogglerContents = Ember.View.extend({
    templateName: "toggler-contents",
    classNames: ["toggler-contents"],
    
    didInsertElement: function(){
        this.$().hide().show("explode");
    },
    
    // this doesn't work for obvious reasons:
    // the element is removed before the animation can take place
    // there's no way of deferring the removal
    willDestroyElement: function(){
        this.$().hide("slow");
    }
});