如何创建在使用ng-animate悬停时水平打开的子菜单（选择）？

Question

我有2行状态，每行包含2列：

1）第一个状态是鼠标光标没有悬停在第一列（菜单）

上

<div class="row">
    <div class="col-md-3"> 
       Active button 
    </div>
    <div class="col-md-9"> 
       <input type="search" ng-model="directionsSearch" /> 
    </div>
</div>

2）第二个状态是鼠标悬停在第一列（菜单）上并且菜单被展开

<div class="row">
    <div class="col-md-8"> 
        Button 1 | Button 2 | Button 3 | Button 4 | Button 5  
    </div>
    <div class="col-md-4"> 
        <input type="search" ng-model="directionsSearch" /> 
    </div>
</div>

正如您所看到的那些列的大小在不同的状态中发生变化，我希望通过使用ng-animate来平滑地进行此转换

我该如何实施？