Css transition not working?

I am working on an Ionic template, which I've boiled down to the basics which you can view here: http://plnkr.co/edit/swBk7wfTWsQFANR6cj8B?p=preview.

The goal is to have a row folding out underneath the list item that is clicked. I got it to appear/disappear after the list item is clicked. Now I want to add a transition, so that the row doesn't just appear but slides into view. The transition doesn't seem to work however.

The structure of a list item is:

 <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>

And the accompanying css is:

.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;
}

What am I missing here?