Cargas de página AJAX usando MooTools Fx.Explode -

Nota: Todo el crédito por Fx.Explode es para Jan Kassens.

Una de las increíbles piezas de código en el sandbox del desarrollador principal de MooTools, Jan Kassens, es su funcionalidadFx.Explode. Cuando haces clic en cualquiera de los elementos Fx.Explode designados, los elementos “explotan” fuera de la pantalla. Haz clic de nuevo y reaparecerá mágicamente. ¿No me crees? ¡Mira el ejemplo de Kassens!

Al hablar con Jan, su idea era utilizar este efecto para los cambios de página, pero nunca llegó a hacerlo. Completé este objetivo, aunque con un código feo, pero creo que vale la pena echarle un vistazo.

Clase MooTools Fx.Explode de Kassens

/* creado por el legendario desarrollador de MooTools, Jan Kassens */Fx.Explode = new Class({Extends: Fx.CSS,options: {grow: 0.5,expand: 1,transition: "expo:out",duration: 750 }, inicializar: función(elementos, opciones){this.elements = this.subject = $$(elementos);this.parent(opciones);this.addEvent('completo', function(){this.clones.dispose( ); if (this.inverted) this.elements.setStyle('opacity', 1);}, true);},calcular: function(from, to, delta){var now = {};for (var i in from) {var iFrom = de[i], iTo = a[i], iNow = ahora[i] = {};for (var p en iFrom) iNow[p] = this.parent(iFrom[p], iTo [p ], delta);}volver ahora;},establecer: función(ahora){para (var i en ahora){var iNow = ahora[i];para (var p en iNow) this.render(this.clones [i ], p, iNow[p], this.options.unit);}devuelve esto;},start: function(fromX, fromY, inverted){this.inverted = !!inverted;var from = {}, to = { };this.clones = $$(this.elements.map(function(el, i){var clone = el.clone();var coords = el.getCoordinates();clone.setStyles(coords).setStyle (' posición', 'absoluta').inject(document.body);el.setStyle('visibilidad', 'oculto');var centro = {x: coords.left + coords.width / 2,y: coords. top + coords.height / 2};var self = this;(function(prop, end){var parsed = self.prepare(clone, prop, end);if (self.inverted) {(from[i] = from [yo] || {})[prop] = analizado.a;;(a[i] = a[i] || {})[prop] = analizado.desde;} else {(desde[i] = desde[i] || {})[prop] = parsed.from;;(to[i] = to[i] || {})[prop] = parsed.to;}return arguments.callee;})('top', coords. arriba + (center.y - fromY) * this.options.expand - coords.height * this.options.grow / 2)('left', coords.left + (center.x - fromX) * this.options.expand - coords.width * this.options.grow / 2)('ancho', coords.width * (1 + this.options.grow))('altura', coords.height * (1 + this.options.grow) )('opacidad', 0);return clone;}, this));return this.parent(de, a);}});

Mi uso / ejemplo

var init = función (req) {var mostrar = verdadero;var corriendo = falso;var explotar = nuevo Fx.Explode('#fx-contain *', {duración: 500,onComplete: función(){ corriendo = falso; } });var implode = new Fx.Explode('#fx-contain *', {onComplete: function(){ running = false; },transición: 'sine:in:out',duración: 500,grow: -1 , expandir: -.8});$$('#fx-contain a').each(function(el) {el.addEvent('click', function(e){e.stop();if (ejecutando ) return;si (se muestra) explode.start(e.client.x, e.client.y);de lo contrario implode.start(e.client.x, e.client.y, true);ejecutando = true ;mostrado = !shown;req.send({url: el.get('href')});});});};/* haciendo que las cosas sucedan */window.addEvent('domready', function () {var req = nueva Solicitud ({método: 'get', datos: {ajax: 1}, onSuccess: función (respuesta) {// desvanecer contenido $ ('fx-contain'). set ({html: respuesta) }); init (solicitud);}});init(solicitud);});

Como dije, mi código no es bonito pero funciona. ¡Disfruta!