Crear transiciones CSS al cambiar entre páginas-SWUP

Vista prévia

Descripción

La biblioteca de JavaScript de intercambio le permite aplicar transiciones CSS personalizadas a las páginas cuando se cambia entre ellas. Admite la precarga, la caché de páginas y los controladores de eventos.

See also:

• transiciones de página basadas en CSS3 â & #128; & #147; Animate Transition
• transiciones de página suaves con JavaScript y PJAX â & #128; & #147; barba. js

¿Cómo funciona?

Instale la biblioteca de intercambio.

# NPM
$ npm install swup --save

Importe la biblioteca de intercambio.

import Swup from 'swup'

Inicializar la biblioteca de intercambio y estamos listos para ir.

const swup = new Swup()

Agregue la clase ' SWUP ' al contenido principal de su página web.

<main id="swup">

Main content here
</main>

Agregue una clase de animación al elemento contenedor.

<div class="animation-class">

<main id="swup">


Main content here

</main>
</div>

Aplique sus propios efectos de transición a la página.

.animation-class {

/* default animation rules */
}

html.is-animating .animation-class {

/* CSS styles when animating
*/
}

html.is-changing .animation-class {

/* CSS styles when changing
*/
}

html.is-leaving .animation-class {

/* CSS styles when leaving
*/
}

html.is-rendering .animation-class {

/* CSS styles when rendering
*/
}

Todas las opciones de configuración predeterminadas.

const swup = new Swup({



cache: true,



animationSelector: '[class^="a-"]',



elements: ['#swup'],



pageClassPrefix: '',



debugMode: false,



scroll: true,



preload: true,



support: true,



disableIE: false,




animateScrollToAnchor: false,



animateScrollOnMobile: false,



doScrollingRightAway: false,



scrollDuration: 0,




LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
})

Registro de cambios

v1.9.0 (01/07/2019)

• hacer que el método preloadPage devuelva Promise

v1.7.18 (01/07/2018)

• corregir querySelectorAll problema en el controlador de formularios y destruir método

v1.7.17 (12/17/2018)

• corrección de la SWUP atascada por errores dentro de los controladores definidos con el método