改变Mootools幻灯片切换的方向？

Question

我正在开发一个使用Mootools的项目。遗憾的是，由于项目的复杂性，我没有选择将jQuery引入到项目中，并且在尝试获得我想要的简单动画时遇到了困难。

我正在使用幻灯片切换功能，该功能默认为滑入和滑出元素的左侧。我希望幻灯片向另一个方向工作 - 从右侧滑入和滑出。

不幸的是，该文档没有提及任何与此有关的事情，看起来没有人在任何论坛上提出这个问题。

这是我的HTML：

<div id="app">
    <div id="appcontent" style="margin: 0px;">
        <a id="closebutton" href="#">Close</a>Content Here
    </div>
</div>

这是我的Mootools javascript：

var slide = new Fx.Slide('app');

$('closebutton').addEvent('click', function(event)
{
event.stop();
slide.toggle('horizontal');
});

有没有人对如何解决这个问题有任何想法？

非常感谢提前。

-G。

Answer 1

它向上/向左滑动的原因只是一个实际的 - 向右滑动可能会导致一些不利的副作用，父容器会自动增长以容纳内容，从而干扰页面的其余部分或触发不需要的滚动条

此外，Fx.Slide现在已经过时，因为它的功能已被CSS3 Transitions模块废弃，现在是widely supported。

Here's a sample关于如何使用CSS3过渡和只是一点点Javascript来实现这一点。如果你移除了身体上的overflow:hidden，你就会明白为什么向右滑动会产生比左边更多的问题。