angularjs - ngAnimate working for show but not hide -


i have nganimate slide card in on show, , out on hide. sliding in works, 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 css

.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

a few things:

  1. the double-curlies shouldn't there. ng-hide/show values angular expressions, not needed. e.g. following should enough

    ng-hide="cardback.id == n.id" 
  2. having ng-hide/show on same element exact oposite conditions seems strange. guess, 1 suffice.

  3. you used top transition property, though no position defined. pasting mishap, if not, should check on that.

here working example. though without further input side it's guesswork.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -