Jesse M. Holmes
Aug 22, 2017 · 2 min read

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.

)

Jesse M. Holmes

Written by

Angular 2 abuser. Financial guru. Language fanatic. ADHD Avenger. Lover of giant hounds. Believer in the impossible.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade