I am facing an issue with my animation where it works perfectly in Chrome but not in IE. The desired effect is to slide a panel into view from outside the browser window, and upon clicking the exit button or <div> covering the rest of the page, the panel should animate off the screen. However, what actually happens is that the entire page gets transformed instead of just the specific element.
Check out the demonstrations below:
Chrome (works smoothly): https://i.stack.imgur.com/N4P3W.gif
IE (bug; whole page moves): https://i.stack.imgur.com/XTVDT.gif
EDIT
The reason for this issue turns out to be the presence of an *ngFor loop when rendering HTML inside the container. When I remove the ngFor loop and all other property bindings, the animation functions correctly as shown in the Chrome GIF.
I initially omitted this code from the question because I did not think that some logic in *ngFor would disrupt the CSS.
So, my query is, why does the *ngFor cause the animation to break, and how can I resolve this issue?
Code:
side-bar-component.ts:
animations: [
trigger('animateInOutTrigger', [
transition(':enter', [
style({ transform: 'translateX(0%)' }),
animate('0.3s', style({ transform: 'translateX(-100%)' }))
]),
transition(':leave', [
animate('0.3s', style({ transform: 'translateX(0%)' }))
])
]),
trigger('fadeScrim', [
transition(':enter', [
style({ transform: 'opacity: 0' }),
animate('0.3s', style({ opacity: '1' }))
]),
transition(':leave', [
animate('0.3s', style({ opacity: '0' }))
]),
]),
side-bar-component.html:
<div id="btn-scrim" *ngIf="windowWidth >= 768 && open" class="scrim" (click)="onCloseSideBar()" @fadeScrim></div>
<div *ngIf="windowWidth >= 768 && open" class="sidebar-wrapper">
<div @animateInOutTrigger class="container">
<div class="header">
<span class="text">Claim Details</span>
<span id="btn-close-sidebar-desktop" (click)="onCloseSideBar()">X</span>
</div>
<div class="claims claims-padding">
<hr-claim-detail [id]="'claim-scroller-' + element.claim_id" *ngFor="let element of group.data" [element]="element (update)="updateAndClose()" [windowWidth]="windowWidth" [token]="token [logConfig]="logConfig">
</hr-claim-detail>
</div>
</div>
side-bar-component.scss:
.sidebar-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
transform: translateX(100%);
z-index: 2;
}
.container {
height: 100%;
position: absolute;
top: 0;
box-sizing: border-box;
background-color: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14);
z-index: 2;
display: flex;
flex-direction: column;
transform: translateX(-100%);
}
.scrim {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .32);
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.header {
height: 56px;
background-color: #333333;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
color: white;
position: relative;
z-index: 2;
}
.text {
font-size: 16px;
font-weight: 500;
}
.claims {
height: 100%;
overflow-y: scroll;
-ms-overflow-style: none;
box-sizing: border-box;
flex: 1;
}
.claims-padding {
padding-bottom: 25vh;
}
STACKBLITZ RECREATION: https://stackblitz.com/edit/angular-ven7eu
Things I've attempted:
- Using
statefor transition control instead of using:enterand:leave - Trying to achieve the same functionality without Angular animations library, solely with CSS conditional classes
Additional information:
- Angular Core 8.0.0
- Angular Animations 8.0.0 (I have experimented with downgrading to older versions and upgrading to latest minor and patch versions)