0

I am a bit confusing about my issue because it will run locally but does not run on server.

The idea is to animate a table from state increased to the state reduced (and other way round) with window.innerHeight minus static value (e.g. 150) and on the same time a detail card moves in or out the frame.

app.ts:

animations: [
trigger('BodyDetailsInOut', [
  state('in', style({ transform: 'translateY(0)' })),
  state('out', style({ transform: 'translateY(100%)' })),
  transition('out => in', [style({ opacity: 0, transform: 'translateY(100%)' }), animate('400ms ease-in')]),
  transition('in => out', animate('400ms ease-out')),
]),
trigger('TableReduceIncrease', [
  state('reduced', style({ height: window.innerHeight - 750 + "px" })),
  state('increased', style({height: window.innerHeight - 150 + "px" })),
  transition('increased => reduced', [style({ height: window.innerHeight - 150 + "px" }), animate('400ms ease-in')]),
  transition('reduced => increased', animate('400ms ease-out')),
])]

However, it works fine locally but on server the table does not reduce.

In the Console a warning occured like:

Invalid keyframe value for property height: -150px

Btw.. is it probably a server-setting issue or completly not allowed to set height like this?

Akj
  • 7,038
  • 3
  • 28
  • 40
B00ling
  • 3
  • 1
  • 2
  • The height of the window can be get with `height: 100vh`, which means "viewport height". You can make calculations with `height: calc(100vh - 750px)`, but it would work on recent browsers only. –  Aug 20 '18 at 12:39
  • And when you talk about your server, are you talking about server-side rendering ? –  Aug 20 '18 at 12:40
  • Finally, you could take advantage of the `position: fixed` and set the style as follows : `box-sizing: content-box; padding: 375px 0px; max-height: 100vh;`. –  Aug 20 '18 at 12:41
  • @trichetriche: i mean, if that project is deployed on the server and locally is "on debug-modus" – B00ling Aug 20 '18 at 12:52
  • Probably an issue with runtime then. Did you try my other two solutions ? The second one should fullfil your need –  Aug 20 '18 at 12:53
  • 1
    @trichetriche: i am on it.. :) .. Well, it works fine on chrome! Thank you very much! – B00ling Aug 20 '18 at 12:57
  • 1
    I tested it on Chrome, Edge and Firefox. Every Browser shows it different. On Chrome it runs best. Little adjustment will solve this problem. – B00ling Aug 20 '18 at 13:07

0 Answers0