Mootools - 一个用于不同效果的 Fx.Morph 对象？ ... 也变形 onComplete

Question

我在使用 Mootools Fx.Morph 对象时遇到问题。我希望我能够多次使用单个对象来创建不同的效果。我想在单个 div 上切换效果。但我的效果只在第一次触发。有没有 Fx.Morph 向导可以提供建议？

这是我的课

    var F = new Class({

    Implements: [Options, Events],

    myFX: null,

    dDiv: null,

    options: {
        container: null,
        width: '250px',
        background: '#ccc'
    },

    initialize: function(options) {
        this.setOptions(options);
        this.addDemoDiv();
    },

    addDemoDiv: function() {
        var dDiv = new Element('div', {
            'class': 'myClass',
            html: 'Click me!',
            styles: {
                padding: '20px',
                border: '1px solid #999',
                width: this.options.width,
                background: this.options.background
            },
            events: {
                click:  this.animate.bind(this)
            }
        });

        if (!this.container) {
            this.dDiv = dDiv.inject(document.body);
        } else {
            this.dDiv = dDiv.inject(this.container);
        }

        this.myFx = new Fx.Morph(dDiv);
    },

    animate: function(e) {
        this.dDiv.set('html', 'Hello world');
        this.myFx.start({
            height: 200,
            width: 500,
            link: 'cancel',
            onComplete: function(){
                this.dDiv.removeEvent('click', this.animate);
                this.dDiv.addEvent('click', this.deanimate.bind(this));
            }.bind(this)
        });
    },

    deanimate: function(e) {
        this.dDiv.set('html', 'Click me!');
        this.myFx.start({
            height: 20,
            width: 250,
            link: 'cancel',
            onComplete: function() {
                this.dDiv.removeEvent('click', this.deanimate);
                this.dDiv.addEvent('click', this.animate.bind(this));       
            }.bind(this)
        });
    }

});

window.addEvent('domready', function() {

    var item = new F({cntainer: 'container', background: '#ddd', width: '250px'});

});

我已经尝试了很多方法，包括放弃 Fx.Morph 属性并在每次点击时只调用 div 上的 .morph。这似乎导致了可怕的浏览器问题，可能是因为每次点击都会创建一个新的 Morph 对象并泄漏内存。

deanimate() 方法肯定会被调用，因为this.dDiv.set('html', 'Click me!'); 正在工作。但 div 不会缩回。我尝试过应用其他效果，例如背景颜色，但它们也被忽略了。

这是否意味着 Fx.Morph 对象在您运行 start() 后被销毁？

Fx.Morph 的 onComplete 处理程序也不会像您预期的那样运行。当我将 console.log 放在 animate() 方法的 onComplete 中时，日志消息会在动画完成之前很久就显示出来。那么是在脚本解析完成的时候才onComplete吗？

或者这只是我是个笨蛋？任何指点都感激不尽！

=======================

稍后添加

我已经能够通过丢失 Fx.Morph 对象并使用 .morph 和切换变量设置动画来解决这个问题，就像这样

    animate: function(e) {
        if (!this.anim) {
            this.dDiv.set('html', 'Hello world');
            this.dDiv.morph({
                background: '#666',
                width: 500,
                height: 250
            });
            this.anim = true;
        } else {
            this.dDiv.set('html', 'Click me!');
            this.dDiv.morph({
                background: '#eee',
                width: 250,
                height: 100
            });
            this.anim = false;
        }
    }

但如果有人能解释为什么第一个版本不起作用，我将非常感激！

Answer 1

这是绑定和removeEvent的错误。

this.animate.bind(this) 返回的函数与您在 removeEvent 时比较的 this.animate 不同。

如果你绑定了需要移除的事件回调，你应该存储它们： http://jsfiddle.net/yLhHG/（不完整，但它首先会缩小。阅读更多：

基本上：

this.boundEvents = {
    click: this.animate.bind(this)
};

...

this.dDiv.removeEvent('click', this.boundEvents.click);

或：

this.dDiv.addEvent('click', this.boundEvent = this.animate.bind(this));

...

this.dDiv.removeEvent("click", this.boundEvent);

最后：

您可以完全重写它以使用单个方法但传递不同的对象。稍后会更新。

那里：http://jsfiddle.net/yLhHG/1/

var F = new Class({

    Implements: [Options, Events],

    myFX: null,

    dDiv: null,

    options: {
        container: null,
        width: '250px',
        background: '#ccc',
        fx: {
            animate: {
                props: {
                    height: 200,
                    width: 500
                },
                html: "hello world"
            },
            deanimate: {
                props: {
                    height: 20,
                    width: 250
                },
                html: "bye world"
            }
        }
    },

    initialize: function(options) {
        this.setOptions(options);
        this.container = this.options.container || document.body;
        this.addDemoDiv();
    },

    addDemoDiv: function() {
        this.element =  new Element('div', {
            'class': 'myClass',
            html: 'Click me!',
            styles: {
                padding: '20px',
                border: '1px solid #999',
                width: this.options.width,
                background: this.options.background
            },
            events: {
                click: this.animate.bind(this)
            },
            morph: {
                link: "cancel",
                onComplete: function() {

                }.bind(this),
                onStart: function() {
                    this.element.set("html", this.options.fx[this.action].html);
                }.bind(this),
                onCancel: function() {
                   //
                }
            }
        }).inject(this.container);

    },

    animate: function(e) {
        this.action = this.action == "animate" ? "deanimate" : "animate";
        this.element.morph(this.options.fx[this.action].props);
    }
});

new F({
    cntainer: 'container',
    background: '#ddd',
    width: '250px'
});