1

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

在这里摆弄示例

4

1 回答 1

0

您正在使用的转换超过了定义为最终值的值.set(property, value);。因此，当打开最终宽度为 300 像素时，过渡/效果会超过该宽度，而不是软回到最终值。

这在打开时效果很好，因为宽度可以是 310px 或更大，然后返回到 300px，但是当 with 在 with 0px 下有过渡时，效果就不太好了。如果最终宽度为 10px，它实际上可以正常工作（请查看此处），但这不是您想要的效果。

所以我的建议是用CSS修复它，或者在关闭侧边栏时改变过渡，或者完全使用其他效果。

选项 1：小提琴- 相同的过渡打开，没有缓出关闭
选项 2：小提琴- 与您的效果相同，但使用 CSS 并在侧边栏下隐藏了 10px 的侧边菜单。（z-index:3;on#sideBar和left:80px;width: 10px;on #sideMenu。还有 10px 作为补间的最终值。）

要检查 Mootools 演示中的不同转换，请查看此处。

于 2013-08-25T20:29:40.720 回答