Add animation when expression value changes - Angular 5
the :enter animation will only animate elements that are newly created. Your "hacky" workaround works because it forces the inner span to get recreated whenever the value changes. I think what you want is to remove the :enter query. You want to animate when the number is in/decremented, and your animation has nothing to do with elements being added.
I'm just going to paste the code as it would look, as Benjamin Kindle said, I tried it and it worked:
animations: [ trigger('valueAnimation', [ transition(':increment', [ style({ color: 'green', fontSize: '50px' }), animate('0.8s ease-out', style('*')) ] ), transition(':decrement', [ style({ color: 'red', fontSize: '50px' }), animate('0.8s ease-out', style('*')) ] ) ]) ]