Barba: How to catch moment when new page html is loaded?

[MichaelChistyakov]

I'm trying to implement animated transition between pages (when some 'news card' expands to viewport and became a header section of new page) and I want to get sure that all images of new page are loaded before page is showed.

I'm using 'imagesloaded' library and I cannot find a way to integrate it into process of 'leave → enter'.

First of all I tried to place 'imagesloaded' process into 'enter' hook but after first leave transition ended I had empty screen because barba replaces DOM containers and my new container opacity is seted to zero before images are fully loaded. Thats ok.

Then I tried to use 'imagesloaded' in 'leave' hook but I dont see any methods to catch moment when 'data.next.container' appears.

Can you help me? The only thing I need is a simple way to catch moment when new page html is loaded. If I had it I would wait till all images from new page html are loaded and after that continue barba process of replacing containers.

[xavierfoucrier]

Hi @MichaelChistyakov!

Sorry for the late reply... :roll_eyes:

You should put your code in the beforeEnter hook, the data.next.container is added to the DOM between afterLeave and beforeEnter.

Take a look at the lifecycle diagram here:
https://raw.githubusercontent.com/barbajs/barba/master/lifecycle-diagram.png

Hope this help :wink:

[MichaelChistyakov]

@xavierfoucrier Thank you! I'll try it.

[theamnesic]

I think I miss something ...

I'm trying to make a very basic animation, where the old container don't move and the new one come above from the bottom :

  transitions: [{

    leave(data) {

      const done = this.async();

      data.current.container.classList.remove('come')
      data.current.container.classList.add('leave')

      setTimeout(function () {
        done();
      }, 500);

    },

    enter(data) {
      data.next.container.classList.add('come')
    }

  }]

main
  &.leave
    position fixed
    top 0
    left 0
    right 0
    z-index 1

  &.come
    position relative
    z-index 2
    animation come 0.5s ease-in-out-sine forwards 1

@keyframes come
  from
    transform translate3d(0, 100vh, 0)
  to
    transform translate3d(0, 0, 0)

But the old one disappear before "enter", which is not normal ...
I don't understand 🤔

[MichaelChistyakov]

@theamnesic try 'beforeEnter' hook

[theamnesic]

It's the same.
The old container is supposed to be removed after afterEnter, no ?

[MichaelChistyakov]

@theamnesic Sorry, my mistake. 'afterLeave' of course :)

[theamnesic]

Ok, fixed!

Misunderstanding on this.async();

  transitions: [{

    leave(data) {

      data.current.container.classList.add('leave')

    },

    enter(data) {

      const done = this.async();

      data.next.container.classList.add('come')

      setTimeout(function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        data.next.container.classList.remove('come')
        done();
      }, 700);

    }
  }]

main

  &.leave
    position absolute
    left 0
    right 0
    z-index 1

  &.come
    position fixed
    top 0
    left 0
    right 0
    z-index 2
    animation come 0.7s ease-in-out-circ forwards 1