Biblioteca de JavaScript para transiciones de página basadas en CSS3-Animate Transition

Vista prévia

Descripción

Animate Transition le permite realizar fácilmente la transición entre dos (o más, todo depende de usted) elementos HTML. Se puede utilizar en diferentes tipos de situaciones, cualquier cosa que desee para mejorar la apariencia de su sitio web o navegar entre las páginas en la aplicación móvil híbrida.

Animate Transition proporciona un gran rendimiento debido al uso de transiciones de CSS aceleradas por hardware. Puede elegir entre 12 tipos de animación predefinidos para bloques, 8 tipos de animación para popups o crear su propia animación CSS.

Uso básico

Cargue la hoja de estilos necesaria y la biblioteca de Animate Transition JS en el proyecto.

<link rel="stylesheet" href="transitions.css">
<script src="animateTransition.min.js"></script>

Bloques de Animate:

AnimateTransition({


// container where the animation will take place.

container: container,


// block, to which the transition is carried out.

// If it is not defined, by blockOut the block with the selected animation will disappear from the screen.

blockIn: blockIn,


// block, from which the transition is carried out.

 // If it is not defined, by blockIn the block with the selected animation will appear.

 // At least one parameter ( blockIn or blockOut ) must be specified.

 // container, blockIn, blockOut can be both css selectors or already existing DOM Elements.

blockOut: blockOut,


// slide-in, slide-out, fade-in, fade-out, cover-in, cover-out, cover-double-in,

 // cover-double-out, revolution-in, revolution-out, bounce-in, bounce-out

animation: 'slide-in',


// callbacks

onTransitionStart: function (blockIn, blockOut, container, event) {


},



onTransitionEnd: function (blockIn, blockOut, container, event) {


}

});

Animar popups.

AnimateTransition({

container: container,

blockIn: popup,


// popup-scale-in, popup-drop-in, popup-revolution-in, popup-fade-in,

 // cover-in, cover-left-in, cover-right-in, bounce-in

animation: 'slide-in',

onTransitionStart: function (blockIn, blockOut, container, event) {


},

onTransitionEnd: function (blockIn, blockOut, container, event) {


}
});