Currently tackling a challenge in Angular 5 where I am trying to build a custom carousel image browser from scratch. The goal is to allow users to navigate through images by clicking or swiping to view the next or previous image.
The animations for the :enter transitions are working flawlessly, as indicated in my code with "void => next" and "void => prev". However, the transitions for "next => void" and "prev => void" are not functioning as expected.
Every solution I have found online revolves around child components, setting the element style to display: block, and triggering detectChanges() after changing the state. Despite implementing these steps and even including "display: block" in the animation style, the issue persists. I have double-checked that detectChanges() is called immediately after the state change, but none of these tactics have resolved the problem.
I came across a comment suggesting that detectChanges() may no longer suffice for :leaving animations. The proposed workaround involved enclosing the code responsible for removing the element from the DOM within a setTimeout() callback. Regrettably, even this approach did not yield the desired outcome.
Desperate for a solution, I resorted to copying and pasting the entire code block from a GitHub repository, with minor modifications to variable names. Surprisingly, this also failed to resolve the issue!
This problem is causing me a great deal of frustration. Any assistance would be greatly appreciated.
Component (Angular 5 in TypeScript)
import { Component, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';
type Orientation = ('prev' | 'next' | 'none');
...
Template
<div class="album-browser-container">
<div class="left arrow small-glow" (click)="click(LEFT)"></div>
<div class="viewport-frame glow">
<div class="viewport">
<div class="image-slider"
(swipeleft)="swipe($event.type)"
(swiperight)="swipe($event.type)">
<div class="carousel"
*ngFor="let image of selectedImage">
<div class="image-container"
[@animateCarousel]="orientation">
<img [src]="image" class="album-image">
</div>
</div>
</div>
</div>
</div>
<div class="right arrow small-glow" (click)="click(RIGHT)"></div>
</div>