javascript – 为什么在转换完成之前触发transitionend事件?
作者:互联网
我正在尝试设计一个网站,其中不同的信息保存在不同的div中.用户单击一个链接,当前div淡出直到透明并转换为右边,而新的淡入淡出从左边开始.我们的想法是调用一个函数,将一个“fadeOut”类添加到旧的div中,为新的类添加一个“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 onl oad="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>
我尝试过多种不同的调整方式,据我所知,这一切都归结为过渡事件不能正常启动.我见过很多人说它根本不会发射它们,但是有人知道如果它太快发射它怎么修复它?
解决方法:
编辑:
看了你的小提琴后,我发现你的代码有几个问题.
>您的重置立即触发的原因(我的原始答案处理的主题)是您正在调用它而不是将其添加为事件侦听器.
>您在转换结束前调用show,因此在调用reset时,将删除fadein类并隐藏新页面.
我有forked your fiddle一些变化,使其工作.
为了完整,我原来的答案是:
你的隐藏(id)功能有误
您正在立即调用重置.将重置(页面)更改为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,css3,css-transitions,html 来源: https://codeday.me/bug/20190703/1363892.html