Angular Animation When Filtering Out Objects

In Angular I'm having trouble animating the transition of an objects position after an Angular filter completes.

I've created a codepen to demo the functionality.

Now the opacity transitions to fadeinout those objects work fine once the filter is run but then they jump into their new position, and I would much rather prefer to apply a smooth transition to this as well.

ul.nav li { 
  transition: all ease 2s ;
}
.animate.ng-enter,
.animate.ng-leave
{
  transition: all 500ms;
}
.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
  opacity: 0;
  width: 0px;
  height: 0px;
}
.animate.ng-enter.ng-enter-active,
.animate.ng-leave {
  opacity: 1;
  width: 150px;
  height: 30px;
}

Any ideas?

Joe