0

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/

Aviad P.
  • 32,036
  • 14
  • 103
  • 124

1 Answers1

1

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)'
          }) 
        )
      ]),
    ])
  ]
br.julien
  • 3,420
  • 2
  • 23
  • 44
  • Sorry I meant 1000ms, but I doubt it changes anything – br.julien Oct 26 '17 at 15:59
  • I figured this workaround for myself, however this still doesn't explain the strange behavior demonstrated in my demo as is, also there is strange behavior when you leave and reenter the element before the animation completes, weird stuff. I think it's a bug in angular animations. – Aviad P. Oct 27 '17 at 05:03