javascript - MooTools 补间口吃/打嗝

Question

我正在使用 MooTools 制作一个相当简单的补间动画。开场动画非常流畅。但后来我添加了结束动画(与开始动画相反)，但几乎每次都会在最后出现卡顿/打嗝的情况。

我尝试了以下方法但没有成功:

• 从展开的 DIV 中删除了所有 HTML 内容
• 将 Bounce 设置直接传递给 Set 函数，而不是使用变量
• 评论了 #content 动画，以确保只有 1 个动画正在运行
• 注释了addClass和removeClass操作

我无法弄清楚是什么导致了这个问题。也许其他人可以看看......

我将测试用例放在网上: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);
});
});

摆弄示例 here

Answer 1

您使用的转换会覆盖 .set(property, value); 中定义为最终值的值。因此，当打开时，最终宽度为 300px，但过渡/效果会超过该宽度，然后软回到最终值。

这在打开时效果很好，因为宽度可以是 310px 或更大，然后返回到 300px，但是当 with 在 with 0px 下有一个过渡时，效果就不那么好了。如果最终宽度为 10px(检查 here )，它实际上可以正常工作，但这不是您想要的效果。

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

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

在 Mootools 演示中检查不同的转换 here 。