Dealing With Overflow Issues During Animation
I’m writing this, my first post on Medium, to receive feedback on something that I’m confident is fairly trivial in animation.
I have a component that enters the DOM, expanding from the top down to reveal itself:

Focus on the top left. Notice how the component that is being revealed bleeds through the parent component as it shifts down. My first thought was, Oh, I should probably set the child component to overflow: hidden
@HostBinding(‘style.overflow’) overflow = ‘hidden’;

Great! Now it’s clean as a whistle. Let’s checkout this datepic … damn. It looks like I need to set overflow: visible once the animation is complete. First I’ll add the function call from the template with @editState.done:
<pap-admin-create-panel *ngIf=”isCreatePanelActive$ | async”
@editState
(@editState.done)=”setOverflow($event)”
#createPanel>
</pap-admin-create-panel>
In the parent component I’ve created a @ViewChild to connect with the child component:
@ViewChild(‘createPanel’) createPanel;
Now I can access a method on the child component, setOverflow:
setOverflow($event) {
if($event.phaseName === 'done' && $event.fromState === 'void') {
this.createPanel.setOverflow('visible');
}
}
And here is the method on the child component that changes the current value of @HostBinding('style.overflow') overflow;:
setOverflow(flag: string) {
this.overflow = flag;
}
Voila!

Of course, when I transition in the opposite direction, overflow must be set to hidden again, or I will have the same issue as earlier with bits of one component bleeding through the other:
toggleCreatePanel() {
this.setOverflow('hidden');
setTimeout(() =>
this.store.dispatch(new fromPanels.ToggleCreatePanelAction), 0);
}
I had to use setTimeout() here in order to set the overflow to hidden before triggering the animation. When I dispatched the action without setTimeout(), overflow wasn’t set to hidden in time.
That is all.
