Angular 6 Router transition between page components

14 views

Skip to first unread message

Dayana Filkova

unread,

Jun 6, 2019, 11:22:40 AM6/6/19

to Angular and AngularJS discussion

### Transition between page components

I'm having issues with **transitioning** between **components** on **route** change. Currently with Angular 6 it's only possible to animate on enter and on leave. But I would like to have the control over when it starts and it ends, where the route change actually waits until all the animations are executed.

The example I see is the Vue js with transition component, which has events, where we can listen to and act upon.

Here is a link to the vue js documentation: https://vuejs.org/v2/guide/transitions.html

Here is an example:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

methods: {
  // --------
  // ENTERING
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // LEAVING
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled only available with v-show
  leaveCancelled: function (el) {
    // ...
  }
}

### Does anybody had solve that issue or has an idea if that is at all possible?