javascript - Cómo detectar si el usuario desliza para la navegación hacia atrás del navegador

Tengo una aplicación Angular con algunas animaciones de enrutador. Cuando navego de A a B, esto se ve como se pretende. Al regresar de B a A haciendo clic en un botón de retroceso dentro de la aplicación o en el botón de retroceso del navegador, la animación invertida también se ve bien.

El problema surge cuando un usuario móvil navega de vuelta de B a A utilizando un gesto de deslizamiento. El deslizamiento en sí crea una especie de animación (revelando la página anterior mientras deslizas el dedo), pero después de que esta navegación ha terminado, mis animaciones dentro de la aplicación todavía se activan, lo cual se ve bastante chocante.

¿Hay alguna manera de detectar si el usuario realizó la navegación hacia atrás deslizando, para poder desactivar mis animaciones de Angular?

Respuesta #1

puedes detectar la navegación hacia atrás así suscribiéndote a los eventos del enrutador, y revisar el navigationTrigger si es igual a "popstate", es una navegación hacia atrás

router.events.pipe(
  filter(( event: NavigationEvent ) => {
             return( event instanceof NavigationStart );
})).subscribe(( event: NavigationStart ) => {
     if(event.navigationTrigger === "popstate") {
        //means it's a back navigation
     }       
});

aquí está la clase NavigationStart de la documentación de Angular para más detalles

class NavigationStart extends RouterEvent {
 constructor(id: number, url: string, navigationTrigger: "imperative" | 
 "popstate" | "hashchange" = 'imperative', restoredState: { [k: string]: any; 
 navigationId: number; } = null)
 navigationTrigger?: 'imperative' | 'popstate' | 'hashchange'
 restoredState?: {...}
 toString(): string

 // inherited from router/RouterEvent
 constructor(id: number, url: string)
 id: number
 url: string
}

Respuesta #2

Puedes agregar este CDN a tu aplicación, tiene un tamaño pequeño y por lo tanto puedes detectar deslizamientos hacia la derecha o hacia la izquierda

https://cdn.jsdelivr.net/npm/[correo protegido]/src/swiped-events.min.js

para deslizar a la izquierda

document.addEventListener('swiped-left', function(e) {
 ...
});

para deslizar a la derecha

document.addEventListener('swiped-right', function(e) {
 ...
});

También puedes usar hammerjs