重载 Dojo 中的 _transition 方法

Question

我要疯了。我要做的就是从 StackContainer 继承并添加一个简单的效果。 请注意：我知道有一些过于复杂的实验性小部件可以进行转换。但是，他们的代码完全是矫枉过正。我所追求的是堆栈容器进行转换的最简单、工作方式。

这是一个非工作示例：

declare('app.StackFade', [ StackContainer], {

  _transition:function(newWidget, oldWidget){

   // this.inherited(arguments); // This breaks things, obviously

    console.log("Transition called");
    html.style(oldWidget.domNode, "opacity", 1);// Random attempt
    baseFx.fadeOut({
      node:oldWidget.domNode,
      duration: 500,
      onEnd: function(){
        console.log("First animation finished");
        baseFx.fadeIn({
          node:newWidget.domNode,
          duration:500,
          onEnd: function(){
            html.style(newWidget.domNode, "opacity", 0);
            lang.hitch(this,"inherited", arguments, arguments); // this doesn't work
            console.log("Second animation finished");
          },
       }).play();
      }
    }).play();

  }
}

如何将这个无效的示例变成有效的示例？再一次，我追求一些非常简单，简单的几行代码来改变_transition，就是这样！

Answer 1

我最喜欢的活动，回答我自己的问题... Dojo、lang.hitch 和 this.inherited(arguments) 似乎有问题。

解决方案是将this 转换为that，和还将arguments 转换为a（其中a 和that 是函数的局部变量）。

我最终创建了一个 mixin，它可以混入任何堆栈容器（也适用于选项卡容器），使其具有“淡入淡出”效果...

享受吧。

define([
  "dojo/_base/declare",
  "dojo/_base/html",
  "dojo/_base/fx",
  "dojo/_base/lang",
  "app/defaults",
  "app/globals",

   ], function(
     declare
     , html
     , baseFx
     , lang
     , BusyButton
     , defaults
     , g
 ){

return declare('app._StackFadingMixin', null, {

  fadeInInProgress: null,
  fadeOutInProgress: null,

  _transition:function(newWidget, oldWidget){

    // console.log("Transition called");

    // Needed later for calling this.inherited(arguments);
    that = this;
    var a = arguments;

    /*
    console.log("Values:");
    console.log("FadeInInProgress :" + this.fadeInInProgress);
    console.log("FadeOutInProgress :" + this.fadeOutInProgress);
    */

    // An animation was stopped: don't do the whole animation thing, reset everything,
    // called this.inherited(arguments) as if nothing happened
    if( this.fadeInInProgress || this.fadeOutInProgress ){

       // Stop animations
       if( this.fadeInInProgress ){ this.fadeInInProgress.stop(); }
       if( this.fadeOutInProgress ){ this.fadeOutInProgress.stop(); }

       // Reset opacity for everything
       html.style(newWidget.domNode, "opacity", 1);
       html.style(oldWidget.domNode, "opacity", 1);

       // call inherited(arguments) as if nothing happened
       this.inherited(arguments);
       return;
     }

    // ////////////////////////////////////////
    // // FADEOUT
    // ////////////////////////////////////////
    // console.log("Fade out starting");
    that.fadeOutInProgress = baseFx.fadeOut({
      node:oldWidget.domNode,
      duration: 150,
      onStop: function(){
        that.fadeOutInProgress = null;
        // console.log("Fadeout stopped");
      },

      // ////////////////////////////////////////
      // // FADEIN
      // ////////////////////////////////////////
      onEnd: function(){

        that.fadeOutInProgress = null;

        // Make the widget transparent, and then call inherited -- which will do the actual switch.
        html.style(newWidget.domNode, "opacity", 0);
        that.inherited(a);
        // console.log("Fadeout ended");

        // At this point the widget is visible, selected but transparent.
        // Let's fix that...
        // console.log("Fade in starting");
        that.fadeInInProgress = baseFx.fadeIn({
          node:newWidget.domNode,
          duration: 150,
          onStop: function(){
            that.fadeInInProgress = null;
            // console.log("Fadein stopped");
          },
          onEnd: function(){
            // console.log("Fadein ended");
            that.fadeInInProgress = null;
          },
       }).play();
      }
    }).play();
  }
}); // Declare

}); // 定义