从右至左切换

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类，了解有关如何修改动画的更多详细信息。