角度顺序动画

Question

我的应用程序中有一个屏幕，有一个侧栏。屏幕首先使用全屏网格将其自身预设给用户，但是当用户单击行/添加按钮（A）时，网格会折叠（B），然后用户会看到详细信息视图。

我想调整这个屏幕视觉变化事件，让网格滑入侧边栏状态，就像刚刚出现一样。

<div>
    <!-- SIDEBAR SECTION -->
    <div ng-class="resize()">        
        <table>
             <tr ng-repeat="participant in $data" ng-click="open(participant)" >
             <!-- code left out for brevity -->
        </table>
    </div>

    <!-- DETAILS SECTION -->
    <div ng-if="state != 0" class="col-lg-9">     
        <div class="row">
            <div some-directive>DETAILS</div>
        </div>
        <hr />
        <!-- left out for brevity -->
    </div>
</div>

resize（）函数返回col-lg-12或col-lg-3，具体取决于屏幕状态

我已经通过在CSS中执行此操作来实现幻灯片动画

.col-lg-3-add {
    -webkit-transition: 0.8s ease-out all;
    transition: 0.8s ease-out all;
}
.col-lg-3-remove {
    -webkit-transition: 0.5s ease-out all;
    transition: 0.5s ease-out all;
}

所有上述工作......除了详细信息部分在转换完成之前立即呈现，然后我的屏幕“跳转”...这不像我预期的那样顺利。

我的问题。

  

如何获取详细信息部分以进行转换。但只有在之后   侧栏部分已完成过渡。

我试过的东西不太合适：

1. 将css类添加到具有较大转换延迟的详细信息。
2. 将ng-if的详细信息绑定到另一个在javascript延迟x秒后切换的属性。 （这有时候会起作用，但有时候不会......不确定踢球者是什么导致效果不同。但是在两个选项中它似乎是最“hackey”）

解决这个问题的正确角度方法是什么，我在这方面画空白......