AngularJS synchronise 2 animations on one element

Question

I want to update the data shown by a Directive using an animation:

• slide old information off downwards;
• while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage)
• slide the new content form above.

My approach is below, but it relies upon a $timeout. I have calibrated as best I can for my development machine but it is not always reliable, and leads to erratic visual effects. There must be a better way, such the second animation only starts when it is signalled that the first is complete?

This is my html

<div class="selectedRestoContainer divider">
    <resto-elem
        id="selectedResto" 
        resto="list.selectedResto" 
        idx="list.selectedIndex"
        ng-class="list.animationClass"></resto-elem>
</div>

This is my css

.selectedRestoContainer {
    $height : 65px;
    height: $height;
    overflow: hidden;
    resto-elem {
        min-height: $height;   // 
        transform: translateY(-100%);   // ensure that without .flash element is off screen
     }
    .flash-add {                // start - off-screen above
        transform: translateY(-100%);
        transition: all 0.7s ease;     // incoming - i.e. transition to 0
    }
    .flash, .flash-add.flash-add-active {
        transform: translateY(0);
    }
    .flash-remove.flash-remove-active { 
        transform: translateY(100%);
        transition: all 0.4s ease;   // outgoing        
    }
}

And this is what I have in my controller

$scope.$on("selectedResto", (e, qname) => {
    // start first animation (400ms set in css)
    $timeout( () => this.animationClass = "", 0 );

    // second animation starts 450ms later
    $timeout( () => {
        this.selectedIndex = qname;
        this.selectedResto = this.recs[qname];            
        this.animationClass = "flash";
    }, 450);
});