gpt4 book ai didi

javascript - MooTools 补间口吃/打嗝

转载 作者:行者123 更新时间:2023-11-28 08:56:24 25 4
gpt4 key购买 nike

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

最佳答案

您使用的转换会覆盖 .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

关于javascript - MooTools 补间口吃/打嗝,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18432671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com