AngularJS在一个元素上同步2个动画

Question

我想使用动画更新指令显示的数据：

• 向下滑动旧信息;
• 在屏幕外时，更改要显示的数据（我也可能需要在此阶段将translateY从+ 100％更改为-100％）
• 滑动上面的新内容表单。

我的方法如下，但它依赖于$timeout。我已经为我的开发机器尽可能地校准了但是它并不总是可靠的，并且导致不稳定的视觉效果。必须有一个更好的方法，这样第二个动画只有在发出第一个动画的信号时才会开始吗？

这是我的HTML

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

这是我的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        
    }
}

这就是我在控制器中的内容

$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);
});