Not animated style for animations

[MickL]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report 
[X] Feature request
[ ] Documentation issue or request
[ ] Support request

What is the motivation / use case for changing the behavior?

Animating often requires the animated-elements to have certain styles only for the animation. E.g. when reducing the height to 0 the element may need to have overflow:hidden. Another example are component-wrappers like <app-component> do not work with opacity unless they have e.g. display: block. This particular styles may only be wanted for the animation, and not for general style. E.g. we need overflow:hidden for animating, but keep overflow:visible in general because of some tooltips.

This is why it would be nice to have a style() that will not but animated, but just applied for the animation.

Current behavior

I don't see any possibility of adding styles the last only for the animation but are not animated. I tried adding display: 'block' to a state and a transition with no success.

Expected behavior

New(?) function similiar to style() for use within animate()

Angular version: 4.x | 5.x.x

[Tiedye]

This should be easy with what we have now, could you share the code that didn't achieve what you wanted?

[MickL]

Im pretty sure that e.g. display or position doesn't have any effect:

animations: [
    trigger('fadeOut', [
      transition('* => void', [
        style({
          display: 'block',
          position: 'absolute',
          opacity: '1',
        }),
        animate(300, style({
          display: 'block',
          position: 'absolute',
          opacity: '0',
        }))
      ]),
    ])
  ],

I do JUST want to animate opacity, but attach display and position while animation runs.

Btw. i wonder how to do a fade transition: While the Element is absolute positioned we would need a placeholder that has exact the height of the element. I could only archieve that by using a lot of detours.

[Tiedye]

I tried this and it worked as expected: http://plnkr.co/edit/Fkm7RFuz8rPp1n42Pq70?p=preview

[matsko]

@MickL this works as expected and was intended. @Tiedye's demo demonstrates that it does work. The display and position properties will be carried over throughout the entire animation sequence. In fact you can place follow-up style properties directly after an animate step to immediately set styles following a step within the sequence.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}