showhide.html

<style>
//CSS
.show-hide.ng-hide-add,
.show-hide.ng-hide-remove {
  transition:0.5s linear all;
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  display:block!important;
}

.show-hide.ng-hide-add { ... }
.show-hide.ng-hide-add.ng-hide-add-active { ... }

.show-hide.ng-hide-remove { ... }
.show-hide.ng-hide-remove.ng-hide-remove-active { ... }
</style>


<script>
//JS
ngModule.animation('.show-hide', function() {
  return {
    addClass : function(element, className, done) {
      if(className == 'ng-hide') {
        animate(..., done);
      }
      else {
        done();
      }
    },
    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {
        element[0].style.setProperty('display','','!important');
        animate(..., function() {
          element[0].style.removeProperty('display');
          done();
        }
      }
      else {
        done();
      }
    }
  }
});
</script>