ngAnimate working for show but not hide

Question

I have an ngAnimate to slide a card in on show, and out on hide. Sliding in works, but sliding out has no animated effect.

html ...

<div  ng-hide="cardback.id == '{{n.id}}'" ng-show="cardback.id != '{{n.id}}'" ng-animate="{show: 'example-show', hide: 'example-hide'}">

and the css is

.example-show, .example-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

.example-show {
  top:-200px;
}
.example-show-active {
  top:0px;
}

.example-hide {
  top:0px
}
.example-hide-active {
  top:-200px;
}

I'm running 1.1.5 dated June 3rd

Answer 1

A few things:

1. The double-curlies really shouldn't be there. ng-hide/show values are already angular expressions, thus they are not needed. E.g. the following should be enough

   ng-hide="cardback.id == n.id"
   

2. Having ng-hide/show on the same element with exact oposite conditions seems strange. I guess, one would suffice.

3. You used top as transition property, though no position was defined. That could be a pasting mishap, but if not, you should also check on that.

Here is a working example. Though without further input from your side it's just guesswork.