Css过渡不起作用？

Question

我正在开发一个Ionic模板，我已经将其归结为您可以在此处查看的基础知识：http://plnkr.co/edit/swBk7wfTWsQFANR6cj8B?p=preview。

目标是在单击的列表项下方折叠一行。单击列表项后，我让它显示/消失。现在我想添加一个转换，这样行不仅会出现，而是会滑入视图。然而，过渡似乎不起作用。

列表项的结构是：

 <ion-item ng-repeat="item in items" class="no-padding" item="no-padding" ng-click="showDetails = !showDetails">
    <div class="row main">{{item.name}} [name]</div>
    <div class="row foldout-row" ng-show="showDetails"></div>
 </ion-item>

随附的CSS是：

.row {
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out; 
}
.row.foldout-row {
  height: 100px;
  background-color: #17435c;
}
.row.ng-hide {
  top: 50px;
}

我在这里缺少什么？