Tengo un "cuadro" div que se desvanece gradualmente usando ".fp-viewing" como un ancla para comenzar el efecto de transición cuando un usuario se desplaza a la página siguiente. El caso es que la página comienza a desplazarse cuando se activa la visualización .fp y el cuadro se desplaza fuera de la vista antes del final de la animación.

¿Cómo puedo retrasar el inicio del desplazamiento cuando se activa .fp-view hasta que box ha realizado su animación en 4s?

.box{
  transition: all 4s ease-out;
  -webkit-transition: all 4s ease-out;
}

.fp-viewing-2 .box{
  opacity: 0;
}