MooTools を使用してかなり単純な Tween アニメーションを実行しています。オープニングアニメーションは完全に滑らかです。しかし、その後、終了アニメーション (開始アニメーションの反対) を追加しましたが、ほとんどの場合、最後に途切れたりしゃっくりしたりするようです。
次のことを試しましたが、成功しませんでした：
- 拡張 DIV からすべての HTML コンテンツを削除しました
- 変数を使用する代わりに、Bounce 設定を Set 関数に直接渡す
- #content アニメーションにコメントを付けて、実行中のアニメーションが 1 つだけであることを確認しました
- addClass および removeClass アクションにコメントを追加
何が問題を引き起こしているのかわかりません。他の誰かが見てくれるかもしれません…</p>
ここでテストケースをオンラインにしました：http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});