Update before animation if interpolation in element class

I'm following [this guide](http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/) and expected to see something like:


Instead I got:


Not sure what I'm doing wrong: my code is essentially the same as in the guide.

``` html

```

``` ts
export class FeedbackService {

private static REMOVE_DELAY_MS = 5000;

public items: FeedbackItem[] = [];

addItem(item: FeedbackItem) {
this.items.push(item);
if (item.autohide) {
setTimeout(
() => this.removeItem(item),
FeedbackService.REMOVE_DELAY_MS * this.items.filter((item) => item.autohide).length
);
}
}

removeItem(item: FeedbackItem) {
let index = this.items.indexOf(item);
if (index > -1) {
this.items.splice(index, 1);
}
}
}
```

``` scss
.feedback-item {
&.au-enter {
max-height: 0;
}
&.au-enter-active {
animation: feedbackUp 1s;
}
&.au-leave-active {
animation: feedbackDown 1s;
}
}

@keyframes feedbackUp {
0% { max-height: 0; }
100% { max-height: 102px; }
}

@keyframes feedbackDown {
0% { max-height: 102px; }
100% { max-height: 0; }
}
```

Start from the supplied template, FeedbackService reproduction, and SCSS animation rules, then compare the actual and expected animation behavior from the linked guide. Trace how repeated elements receive animation classes during insertion and removal, and use the provided example to verify that interpolation and the animation timing produce the expected staggered result.

Written by the indexing model from the issue text.