为什么转换完成之前触发了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 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>

我试着调整了很多不同的方式，而据我可以告诉，这一切都归结为过渡事件不能正常开火。我见过很多人说他们根本不会为他们开火，但是任何人都知道如何快速解决问题？

来源

2014-07-16 mmmm_cake

编辑：

在看看你的小提琴后，我发现你的代码的几个问题。

您复位立即被解雇的原因（主题我原来的答复处理）是你与其说这是将其添加为一个事件侦听器。
您在转换结束前调用show，因此在调用reset时，fadein类将被删除，并且新页面将被隐藏。

我有forked your fiddle有一些变化，使其工作。

为了完整起见，我原来的答复：

你在你的皮（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); 
}

来源

2014-07-16 19:23:20

谢谢！您的解决方案完美运行，但我有点迷路。将隐藏函数传递给hide函数到底是做什么的？ –

这只是回调。它在完成时被称为hide函数内部（完成的参数在里面）。它也可以是一个匿名函数，但是，当您给它一个函数名称时，如果有错误，该函数名称将被打印在堆栈轨迹上。 –

为什么转换完成之前触发了transitionend事件？

回答

相关问题