我正在尝试设计一个网站，其中不同的信息片段保存在不同的 div 中。用户单击一个链接，当前的 div 逐渐淡化直到透明并向右平移，而新的 div 从左侧淡入。这个想法是调用一个函数，向旧的 div 添加一个“fadeOut”类，向新的添加一个“fadeIn”类，然后从旧的 div 中删除额外的类，以便它可以重新开始。它只能在所有转换完成后从旧的 div 中删除多余的类，旧的 div 将消失而不是淡出。我尝试使用 transitionend 监听器来完成此操作，但似乎 transitionend 函数在我创建它时立即运行，而不是在转换实际结束后运行。
我在 http://jsfiddle.net/mmmm_cake/Q78pz/4/ 上用问题代码的核心制作了一个 JSFiddle ，我将其复制到这里:
<head>
<style>
.page {
position:fixed;
margin-left:15%;
margin-right:15%;
top:40px;
left:-20px;
opacity:0
}
.page.fadeIn {
transition:0.5s;
opacity:1;
left:0px
}
.page.fadeOut {
transition:0.5s;
opacity:0;
left:20px;
}
</style>
<script>
var active = 'about';
function reset(page) {
page.classList.remove('fadeOut');
page.classList.remove('fadeIn');
}
function show(id) {
page = document.getElementById(id);
page.classList.add('fadeIn');
}
function hide(id) {
page = document.getElementById(id);
page.addEventListener('transitionend', reset(page), false);
page.classList.add('fadeOut');
page.removeEventListener('transitionend', reset(page), false);
}
function switchTo(id) {
hide(active);
show(id);
active = id;
}
</script>
</head>
<body onload="show(active)">
<div id="navbar">
<a href="javascript:switchTo('about')">About</a>
<a href="javascript:switchTo('contact')">Contact Us</a>
</div>
<div id="about" class="page">
<h3>
About Us
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div id="contact" class="page">
<h3>
Contact Form
</h3>
<p>
Nulla quis commodo arcu. Etiam facilisis risus nulla, vel tempus arcu ultricies eu.
</p>
</div>
</body>
我尝试过以多种不同的方式调整它，据我所知，这一切都归结为 transitionend 事件未正确触发。我见过很多人说它根本不会为他们触发，但有人知道当它触发得太快时如何修复它吗？
最佳答案
编辑:
在查看了您的 fiddle 后，我发现您的代码存在几个问题。
您的重置立即触发的原因(我的原始回答涉及的主题)是您调用它而不是将其添加为事件监听器。
您在过渡结束前调用了 show，因此在调用 reset 时，淡入类被移除，新页面被隐藏。
我有forked your fiddle进行一些更改以使其正常工作。
为了完整起见，我的原始答案:
你的 hide(id) 函数有误
您正在立即调用重置。将 reset(page) 更改为 reset.bind(null, page):
function hide(id) {
page = document.getElementById(id);
page.addEventListener('transitionend', *reset(page)*, false);
page.classList.add('fadeOut');
page.removeEventListener('transitionend', *reset(page)*, false);
}
到
function hide(id) {
page = document.getElementById(id);
page.addEventListener('transitionend', reset.bind(null, page), false);
page.classList.add('fadeOut');
page.removeEventListener('transitionend', reset.bind(null, page), false);
}
关于javascript - 为什么 transitionend 事件在转换完成之前触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24788934/