Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code:
<ul class="digits" [@ordersValue]="countAllOrders" #digits>
<li>0</li>
<li>1</li>
<li>{{ countAllOrders }}</li>
</ul>
The implementation of the animation is as follows:
animations: [
trigger('ordersValue', [
transition(':increment', [
animate('1s', keyframes([style({ marginTop: '-7em' })])),
]),
]),
],
The initial CSS of .digits sets margin-top:0em. During the animation, the desired effect works but instead of ending with a margin-top value of -7em, it finishes with 0em.
Based on some answers I found here, I attempted to use state:
trigger('ordersValue', [
state(':increment', style({ marginTop: '-7em' })),
transition(':increment', [
style({ marginTop: '-7em' }),
animate('1s', style('*')),
]),
]),
CSS:
.digits {
list-style-type: none;
margin-top: 0em;
animation-duration: 1s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
However, that did not resolve the issue. Any suggestions on how to approach this problem?