0

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.

4

1 に答える 1

1

上/左にスライドする理由は単純に実用的なものです。右にスライドすると、コンテンツに合わせて親コンテナーが自動的に拡大し、ページの残りの部分に干渉したり、不要なスクロールバーをトリガーしたりするなどの悪影響が生じる可能性があります。

また、現在広くサポートFx.Slideされている CSS3 Transitions モジュールによってその機能が廃止されたため、最近では廃止されています。

CSS3 トランジションとほんの少しの Javascript を使用して、これを代わりに実装する方法のサンプルを次に示します。ボディの を外すoverflow:hiddenと、右にスライドすると左にスライドするよりも多くの問題が発生する理由が正確にわかります。

于 2013-05-24T12:16:49.650 に答える