從右至左切換

Question

使用AlloyUI Toggler，是否可以從右向左切換div而不是標準的向下→向上？我檢查了Toggler API，但找不到任何種類的開關direction。

這裏是我當前Toggler代碼：

new Y.Toggler({ 
    animated : true, 
    closeAllOnExpand : true, 
    container : '#mySearchForm', 
    content : '.content', 
    expanded : false, 
    header : '.header', 
    transition : { 
      duration : 0.2, 
      easing : 'cubic-bezier(0, 0.1, 0, 1)' 
    }//always toggles from the bottom->up 
}); 

Answer 1

爲了讓Toggler在水平方向進行切換，您需要做三兩件事：

1. 應用float: left;所有Toggler元素，使Toggler水平。

2. 更改animated: true,到：

   animated: { 
       to: { right : '300px' } 
   }, 
   

   注：您可能需要調整像素的確切數量。

3. 更改Toggler至TogglerDelegate。

這是一個JSFiddle與所有這些與您的原始代碼放在一起。

查看YUI Anim和Easing類，瞭解有關如何修改動畫的更多詳細信息。