ng-hide does work when using css keyframe sprite animations

[michelalbers]

When using CSS3 keyframe animations ng-hide does not work instantaneously but delayed.

CSS Sprite animation Code (stylus):

.spinner
  width 100%
  height 30px
  background-image url("../assets/images/spinner_sprite.png")
  animation play 1s steps(19) infinite
  background-repeat no-repeat
@keyframes play
  from 
    background-position center 0px
  to 
    background-position center -570px

Dirty Fix

.ng-hide { display: none !important; }

fixes the issue but does not feel right :/

[matsko]

Do you have a plunkr link? Also, what version are you using of Angular? There was a fix recently which prevents it from hiding whlist inside of an animation.

[matsko]

And to double check, you want the animation to run for an infinite time or for 19 steps?

[matsko]

@michelalbers could you please get back to me?

[michelalbers]

@matsko Sorry for the delay! It was a loading spinner in my case - generated from http://spiffygif.com/?format=png&color=000

    $scope.scan = () ->
      success = (base64) ->
        $ionicLoading.show
          template: "<div class='text-center'><p>Verarbeite Foto ... </p><p ng-init='progress' ng-hide='progress == 100'><progress value='{{progress}}' max='100'></progress><p><div class='spinner' ng-hide='progress <= 100'></div></div></p>"
        $imageService.processBase64 base64
          .then (response) ->
            $imageService.processRekognitionResponse response 
              .then (result) ->
                $ionicLoading.hide()
                try 
                  $rootScope.resultPlayer = result.face_detection[0].matches[0].tag
                  $rootScope.id = result.id
                  $state.go "result"
                catch e
                  console.error e
                  showErrorPopup()
              ,
                (err) ->
                  $ionicLoading.hide()
                  showErrorPopup()
          , (err) ->
              showErrorPopup()
          , (event) ->
              if event.loaded && event.total
                $rootScope.progress = Math.round event.loaded / event.total * 100

The spinner should show when the upload of the image is done and the processing of the image starts for which I cannot provide progress information.

[matsko]

@michelalbers this is a case where a natural CSS animation is conflicting with ngAnimate. Unfortunetly ngAnimate is unable to detect when this happens since it assumes the animation is designed for itself.

To get around this, simply do:

.spinner.ng-animate {
    transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}

[samccone]

Just a note, this bit me and ate a few hours of time 🍕 🕙 , perhaps elevating a note about this in the ng-if, ng-show, ng-hide directive docs would prevent the pain for others.

More than willing to add the docs just let me know, thanks again for this great lib 🌴