As route change triggers an animation, I have a black div that slides from the bottom to the top of the page during transition.
The animation of the sliding div is working correctly. However, the issue arises when the route changes simultaneously with the start of the div's animation, disrupting the smooth transition between routes. I aim for the route to change only when the div completely covers the whole page to ensure a seamless transition.
Should I consider a different approach to address this issue?
https://i.sstatic.net/BTF8C.gif
app.component.html:
<router-outlet #myOutlet="outlet"></router-outlet>
<div class="transition-overlay" [@translate]="getDepth(myOutlet)"></div>
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [
trigger('translate', [
state('1', style({transform: 'translateY(100vh)'})),
state('2', style({transform: 'translateY(-100vh)'})),
transition('1=>2', [ animate('1500ms ease-in-out')]),
transition('2=>1', [ animate('1500ms ease-in-out')])
])
]
})
export class AppComponent implements OnInit, AfterViewInit {
...
getDepth(outlet) {
return outlet.activatedRouteData['depth'];
}
}
app-routing.module.ts:
const routes: Routes = [
{path: '', component: HomeComponent, data: { depth: 1 }},
{path: 'cases', component: WorkComponent, data: { depth: 2 }},
];