从右到左切换

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课程，详细了解如何修改动画。