Вопрос

Я работаю над некоторыми эффектами и прочим, чтобы разобраться с классами / реализациями / Расширениями.Приведенные здесь примеры относятся к базовым классам (MooSlidesFx, MooSlidesFx.Elements), из которых можно создавать множество эффектов в проекте, над которым я работаю, и к двум дочерним классам (MooSlidesFx.Fade, MooSlidesEffects.Элементы.Исчезают), которые действительно что-то делают.

http://paste.mootools.net/m6afc7746

Первый класс, MooSlidesFx, настраивает другие функции, предназначенные для простой реализации.

Второй класс, MooSlidesFx.Elements, расширяет MooSlidesFx для аналогичной реализации, но вместо того, чтобы просто анимировать переданный элемент, он будет анимировать его дочерние элементы по порядку (не ищу цепочку уроков прямо сейчас, но она следующая в моем списке!), и поэтому некоторые методы переопределены.

Третий класс, MooSlidesFx.Fade отлично работает.Он реализует MooSlidesFx, определяет два небольших метода, и мы отправляемся на гонки.

Тогда проблема.IT кажется как будто я могу просто реализовать как 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>

*/
Это было полезно?

Решение

Проблема возникла, когда MooSlidesFx.Elements попытался расширить MooSlidesFx.До сих пор не знаю почему, но сейчас мне все равно.

Я понял, что расширил MooSlidesFx в MooSlidesFx.Elements и переписал каждый из методов.Единственное повторное использование, которое я получил от этого, было это.el и несколько вариантов.

Итак ...Я разделил их на MooSlidesFx.Element и MooSlidesFx.Elements.

Затем я создал библиотеку MooSlidesFx.lib и сохранил там класс Fade (MooSlidesFx.lib.Fade).

Теперь я могу просто:

MooSlidesFx.Fade = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Element]
});

MooSlidesFx.Fade.Elements = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Elements]
});

И это потрясающе.Я <3 вопроса.Теперь пришло время дополнить библиотеку дополнительными классами эффектов!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top