CODEWITHSUNDEEP
angularangular-animations
Aviad P.
Aviad P.

Reputation: 32629

Applying a style during animation transition breaks the transition

I am trying to create an animation transition which applies a constant style while the transition is taking place. Here is my trigger structure:

animations: [
  trigger('bigTrig', [
    state('bigSt', style({
      transform: 'scale(1.3)',
      'background-color': 'green'
    })),
    state('normSt', style({
      transform: 'scale(1.0)',
      'background-color': '*'
    })),
    transition('normSt => bigSt', [
      style({
        borderWidth: '5px',
        borderColor: 'red',
        borderStyle: 'solid',
      }),
      animate(1000,
        // THIS causes the problem to appear - when it is in
        //   the animation doesn't work properly. If I comment
        //   it out, animation works almost as desired: the border
        //   appears but fades away during the transition.
        style({
          borderWidth: '5px',
          borderColor: 'red',
          borderStyle: 'solid',
        })
      )
    ]),
  ])
]

I am setting the trigger to bigSt on mouseenter and to normSt on mouseleave - I expect the element to grow by 30% over 1 second, and while it's doing that to have a 5 pixel solid red border. Once it finishes growing, I want the border to instantly disappear. However, what actually happens is that on mouse enter it gets the border, but doesn't start growing, then after 1 second, it instantly grows by 30% and the border disappears.

I prepared a stackblitz of the case, for demonstration.

https://stackblitz.com/edit/angular-93rwtx?file=app/app.component.ts

UPDATE

I've opened a ticket in Angular's github: https://github.com/angular/angular/issues/20051/

Upvotes: 0

Views: 2061

Answers (1)

br.julien
br.julien

Reputation: 3460

I didn't see you prepared a stackblitz of your demo. I have made some changes to your animation, I think this might be what you were trying to achieve :

animations: [
    trigger('bigTrig', [
      state('bigSt', style({
        transform: 'scale(1.3)',
        'background-color': 'green',
        border: 'none'
      })),
      state('normSt', style({
        transform: 'scale(1.0)',
        'background-color': '*',
        border: 'none'
      })),
      transition('normSt => bigSt', [
        style({
          border: '5px solid red'
          }),
        animate('1s ease-in',
          style({
             border: '5px solid red',
             transform: 'scale(1.3)'
          }) 
        )
      ]),
    ])
  ]

Upvotes: 1

Related Questions