Я работаю над некоторыми эффектами и вещами, чтобы справиться с классами / инструментами / расширениями. Здесь приведены примеры базовых классов (MooSlidesFx, MooSlidesFx.Elements), из которых можно создать множество эффектов в проекте, над которым я работаю, и двух дочерних классов (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade), которые действительно что-то делают.
http://paste.mootools.net/m6afc7746
Первый класс, MooSlidesFx, настраивает вещи для других, предназначенные только для реализации.
Второй класс, MooSlidesFx.Elements, также расширяет MooSlidesFx, чтобы реализовать его, но вместо того, чтобы просто анимировать переданный элемент, он будет анимировать своих детей по порядку (не ищет цепочку урока прямо сейчас, но он следующий на моем list!), и поэтому некоторые методы переопределены.
Третий класс, MooSlidesFx.Fade отлично работает. Он реализует MooSlidesFx, определяет два маленьких метода, и мы отправляемся в гонку.
Тогда проблема. Это кажется , как будто я могу просто реализовать как MooSlidesFx.Elements, так и MooSlidesFx.Fade и POW !! У меня есть новый эффект, который не исчезает в элементе, а скорее исчезает, когда его дети поражены.
Не так, спасибо за любую помощь!
А вот и материнский код:
var MooSlidesFx = new Class({
Implements: Options,
options: {
delay: 0,
duration: 500,
how: 'in',
transition: 'sine:in:out'
},
initialize: function(el,options){
this.setOptions(options);
this.el=$(el);
this.animation = this.setAnimation(el);
},
animate: function(){
this.animation.set($clear);
var calculations = this.calculate(this.el);
this.animation.set(calculations[0]);
var delayed = function(){
this.animation.start(calculations[1])
}.bind(this).delay(this.options.delay);
},
getDuration: function(){
return this.options.delay+this.options.duration
}
});
MooSlidesFx.Elements = new Class({
Extends: MooSlidesFx,
options: {
selector: false,
elementDelay: 200,
order: 'normal'
},
animations: [],
initialize: function(el,options){
console.log('Elements initialize');
this.parent(options);
this.elements=this.el.getElements(this.options.selector);
this.elements.each(function(el,index){
this.animations.include(this.setAnimation(el,index));
}.bind(this));
},
animate: function(){
var eachDelay = this.options.elementDelay;
var calculations=[];
this.animations.each(function(animation,index){
animation.set($clear);
calculations.include(this.calculate(index));
animation.set(calculations[0]);
}.bind(this));
var delayed = function(){
this.elements.each(function(el,i){
var go = function(){
console.log('going '+i)
this.animations[i].start(calculations[i][1]);
}.bind(this).delay(d);
eachDelay = eachDelay + this.options.elementDelay;
}.bind(this));
}.bind(this).delay(this.options.delay);
},
getDuration: function(){
return this.options.delay+this.options.duration+((this.elements.length-1)*this.options.elementDelay);
}
});
MooSlidesFx.Fade = new Class({
Implements: MooSlidesFx,
setAnimation: function(el){
var animation = new Fx.Tween(el,{
property: 'opacity',
duration: this.options.duration,
transition: this.options.transition,
});
return animation;
},
calculate: function(el){
return (this.options.how=='in') ? [0,1] : [1,0];
}
});
MooSlidesFx.Elements.Fade = new Class({
Implements: [MooSlidesFx.Fade,MooSlidesFx.Elements]
// TypeError: Result of expression 'this.caller._owner.parent' [undefined] is not an object.
// mootools-core.js (line 1173)
});
MooSlidesFx.Elements.Fade = new Class({
Implements: MooSlidesFx.Fade,
Extends: MooSlidesFx.Elements
// TypeError: Result of expression 'this.setAnimation' [undefined] is not a function.
// MooSlides.Fx.js (line 15)
});
MooSlidesFx.Elements.Fade = new Class({
Implements: [MooSlides.Fx.Fade, MooSlidesFx.Elements]
// line 49 is never logged, so Elements isn't ever initialized, acts just like MooSlidesFx.Fade
});
/***** usage *****/
var fx = new MooSlidesFx.Elements.Fade('test',{ selector: 'li'}).animate();
/*
HTML
<ul id="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
*/