javascript - 改变 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。

score 1 · Accepted Answer

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

此外，Fx.Slide由于其功能已被 CSS3 Transitions 模块淘汰，现在它已经过时了，该模块现在得到了广泛的支持。

这是一个示例，说明如何使用 CSS3 转换和少量 Javascript 来实现这一点。如果你去掉overflow:hidden身体上的，你会明白为什么向右滑出比向左滑出更多的问题。

1 回答 1