0

I try to animate an element in Angular 4 in terms of its height. Regardless of whether I use margin-bottom or height as attributes to be changed, the change is done, but without animation, meaning, the height/margin-bottom value is jumping from 200px to 0px immediately, without animation and even without delay (if specified).

Here is my animation code:

animations: [
  trigger('ansichtState', [
    state('nurSuche', style({
      'margin-bottom': '200px'
    })),
    state('sucheUndErgebnisse', style({
      'margin-bottom': '0px'
    })),
    transition('nurSuche <=> sucheUndErgebnisse', animate('4000ms'))
  ])
]

The template code is:

<header [@ansichtState]="currentAnsichtState">&nbsp;</header>

currentAnsichtState is defined correctly and changed by a separate function.

Also the margin-bottom value changes from 200px to 0px it is done immediately (although a duration of 4000ms is specified).

What am I doing wrong?

br.julien
  • 3,420
  • 2
  • 23
  • 44
Chris R.
  • 415
  • 2
  • 5
  • 15
  • Can you provide a plunkr? I don't see a mistake otherwise – Gordon Mohrin Jul 26 '17 at 09:54
  • 'nurSuche <=> sucheUndErgebnisse' shouldn´t it be 'nurSuche => sucheUndErgebnisse'. I never worked with margins in an animation, normaly in this cases translate is beeing used. Would reccomend trying it with translate. – Doomenik Jul 26 '17 at 10:03
  • Interestingly, this seems to be a Safari bug, as it works in Chrome... – Chris R. Aug 24 '17 at 10:22

0 Answers0