.ng-hide-remove animations doesn't work on ng-show?

ionic-v1
1

Hi Guys,

I tried to add animation to a button on ng-show="true" to a button element but it doesn’t work:

/* when showing the picture */
.ng-hide-remove      { animation:0.5s flipInX ease; }

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}

Can someone give me a hint what could go wrong here? It works fine on Desktop Mozilla Firefox browser though.

2

Take a look at the css for the accordions demo.


http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

.item.item-accordion {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.item.item-accordion.ng-hide {
  line-height: 0px;
}
.item.item-accordion.ng-hide-add,
.item.item-accordion.ng-hide-remove {
  display: block !important;
}
3

Thank you for the support. I got it working :slight_smile: