0

私はこれに夢中になります。私がしたいのは、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 を変更するための非常にシンプルでプレーンな数行のコードを求めています。

4

1 に答える 1

0

私の好きな活動、私自身の質問に答える... Dojo、lang.hitch、this.inherited（arguments）に問題があるようです。

解決策は、とにthis入る方法です（ここで、とは関数に対してローカル変数です）。thatargumentsaathat

最終的に、任意のスタックコンテナ（タブコンテナでも機能）にミックスインして「フェード」効果を与えるミックスインを作成しました...

楽しみ。

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

}）; // 定義

于 2012-08-08T06:40:00.630 に答える