Senchaフェード効果の実際の実施例

誰かが私にfench inとfenchをどのようにしてsencha touch 1でhtml要素をフェードインできるかを示す完全なコードを書くことができますか？具体的には、必要なhtml、javascript、およびcssファイルがどのようなものであるかを知る必要があります。Senchaフェード効果の実際の実施例

私は、div要素で動作する単純なフェードエフェクトを永遠に試しましたが、成功しませんでした。どちらかの方法でエラーが見つからないか、何も起こりません。 Senchaフォーラムで私の質問に答えている人はいません。私はちょうど何かを明らかにしていないと確信しています。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Nested List - Source Code Browser</title> 
     <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" /> 
    <script type="text/javascript" src="sencha-touch.js"></script> 
    <script type="text/javascript"> 
    Ext.setup({ 
     onReady: function() { 

     // Ext.get('mydiv').hide(); 
     // Ext.get('mydiv').fadeOut(); // fadeOut() does not exist error 
     // Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true}); // does nothing 
     // Ext.Anim.run(Ext.getDom('mydiv'), 'fade', {out:true}); // does nothing 
     } 
    }); 
    </script> 
</head> 
<body><div id="mydiv">hello world</div></body> 
</html>

出典

2012-02-23 John

をここに行く：

  Ext.setup({ 
       onReady: function() { 

        var bool = true; 

        var button1 = new Ext.Button({ 
         text:'Fade', 
         id:'button1', 
         handler: function(){ 
          Ext.Anim.run(button2, 'fade', { 
           out: bool, 
           autoClear:false 
          }); 
          bool = !bool; 
          console.log("fade end"); 
         } 
         }); 

        var button2 = new Ext.Button({ 
         text:'Fade' 
        }); 

        var toolbar = new Ext.Toolbar({ 
         dock:'top', 
         title:'Fade', 
         items:[button1,{xtype:'spacer'},button2] 
        }); 

        new Ext.Panel({ 
         fullscreen: true, 
         dockedItems: toolbar 
        }); 
       } 
      });

オートクリア属性が隠されたボタンを維持します。ここ

追加メモ

は、彼らが失敗した理由を、私が試した事があります退色後

出典

2012-02-23 13:33:20

私はついにそれを理解しました。 TDeBailleulが説明しているように、autoClearは要素をフェードした後に隠しておく。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Nested List - Source Code Browser</title> 
     <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" /> 
    <script type="text/javascript" src="sencha-touch.js"></script> 
    <script type="text/javascript"> 
    Ext.setup({ 
     onReady: function() { 
      Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:false, duration:1000, autoClear:false}); 
     } 
    }); 
    </script> 
</head> 
<body><div id="mydiv" style="opacity:0;">hello world</div></body> 
</html>

例ではフェードイン：ここでは別の例に

例です。ここ繁栄のため

<!DOCTYPE html> <html> <head> <title>Nested List - Source Code Browser</title> <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" /> <script type="text/javascript" src="sencha-touch.js"></script> <script type="text/javascript"> Ext.setup({ onReady: function() { Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true, duration:1000, autoClear:false}); } }); </script> </head> <body><div id="mydiv">hello world</div></body> </html>

出典

2012-02-23 13:50:49 John

をフェードアウトで同時フェードのフィドルで、フェードアウト。

絶対配置のコンテナを使用します。

http://jsfiddle.net/R6cgc/13/

var into = Ext.create('Ext.Container', { 
    width: 440, 
    itemId: 'animTo', 
    layout: { 
     type: 'absolute' 
    }, 
    style: { 
     backgroundColor: '#000', 
     padding: '20px' 
    }, 
    renderTo: Ext.getBody()   
}); 

var one = Ext.create('Ext.Component', { 
    width: 360, 
    height: 100, 
    x: 0, 
    y: 0, 
    itemId: 'one', 
    style: { 
     backgroundColor: 'green' 
    } 
}); 

var two = Ext.create('Ext.Component', { 
    width: 360, 
    height: 500, 
    x: 0, 
    y: 0, 
    itemId: 'two', 
    style: { 
     backgroundColor: 'red', 
     opacity: 0 
    }  
}); 


into.add(one); 
into.add(two); 
into.getEl().setHeight(two.getEl().getHeight() + 40); 
two.hide(); 
var current = one; 

Ext.create('Ext.button.Button', { 
    text: 'Fade', 
    renderTo: Ext.getBody(), 
    listeners: { 
     click: function() { 
      current.getEl().fadeOut({ duration: 2000}); 
      current = current == one ? two : one; 
      current.getEl().fadeIn({ duration: 2000}); 
     } 
    } 
});

出典

2014-04-22 11:24:53

Senchaフェード効果の実際の実施例

答えて

関連する問題