从右向左切换

Toggle From Right to Left

本文关键字：      更新时间：2023-09-26

使用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
});

要使Toggler水平切换，需要做3件事：

  1. 将float: left;应用于所有Toggler元素以使Toggler水平

  2. 将animated: true,更改为：

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

    注意：您可能需要调整确切的像素数。

  3. 将Toggler更改为TogglerDelegate

这里有一个JSFiddle，将所有这些与您的原始代码放在一起。

有关如何修改动画的更多详细信息，请查看YUI Anim和Easing类。

相关文章：
  • 没有找到相关文章