2011-05-23 55 views

回答

2

我覺得你這樣做(對不起,現在不能測試):

new Ext.TabPanel({ 
fullscreen: true, 
defaults:{animation: new Ext.Anim({ 
    direction: 'left', 
    cover: false, 
    reveal: false, 

    before: function(el) { 
     var curZ = el.getStyle('z-index') == 'auto' ? 0 : el.getStyle('z-index'), 
      zIndex = curZ + 1, 
      toX = 0, 
      toY = 0, 
      fromX = 0, 
      fromY = 0, 
      elH = el.getHeight(), 
      elW = el.getWidth(); 

     if (this.direction == 'left' || this.direction == 'right') { 
      if (this.out == true) { 
       toX = -elW; 
      } 
      else { 
       fromX = elW; 
      } 
     } 
     else if (this.direction == 'up' || this.direction == 'down') { 
      //if (this.out == true) { 
      // toY = -elH; 
      //} 
      //else { 
       fromY = elH; //Always slide to the left??? 
      //} 
     } 

     if (this.direction == 'right' || this.direction == 'down') { 
      toY *= -1; 
      toX *= -1; 
      fromY *= -1; 
      fromX *= -1; 
     } 

     if (this.cover && this.out) { 
      toX = 0; 
      toY = 0; 
      zIndex = curZ; 
     } 
     else if (this.reveal && !this.out) { 
      fromX = 0; 
      fromY = 0; 
      zIndex = curZ; 
     } 

     this.from = { 
      '-webkit-transform': 'translate3d(' + fromX + 'px, ' + fromY + 'px, 0)', 
      'z-index': zIndex, 
      'opacity': 0.99 
     }; 
     this.to = { 
      '-webkit-transform': 'translate3d(' + toX + 'px, ' + toY + 'px, 0)', 
      'z-index': zIndex, 
      'opacity': 1 
     }; 
    } 
}) 
}, 
items: [ 
    { 
     title: 'Tab 1', 
     html : '1', 
     cls : 'card1' 
    }, 
    { 
     title: 'Tab 2', 
     html : '2', 
     cls : 'card2' 
    }, 
    { 
     title: 'Tab 3', 
     html : '3', 
     cls : 'card3' 
    } 
] 
}); 
+0

HM,不 - 不工作。但thnx的嘗試! – headkit 2011-05-23 17:45:50

+0

@headkit我認爲這很複雜,我修改了上面的答案。這將創建一個自定義動畫(從幻燈片複製)。 – ballmw 2011-05-23 18:02:03

+0

嗯,不...正在工作... – headkit 2011-05-24 07:33:48