Question

我正在使用MooTools做一个相当简单的Tween动画。开场动画非常流畅。但后来我添加了关闭动画（与开场动画相反），但最近几乎每次都会出现口吃/打嗝。

我尝试了以下但没有成功：

从展开的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，但是如果在0px下有转换，则它不能很好地工作。如果最终宽度为10px（检查here），它实际上可以正常工作，但这不是你想要的效果。

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

选项1：fiddle - 同样的过渡开放，没有缓和关闭
选项2： fiddle - 效果与您相同，但使用CSS并在边栏下隐藏了10px的侧边菜单。（z-index:3;上的#sideBar和left:80px;width: 10px;上的#sideMenu。此外，补间的最终值也是10px。）

要检查Mootools演示中的不同过渡，请选择 here 。

MooTools Tween Stutter / Hiccup

摆弄示例 here

1 个答案: