爲什麼轉換完成之前觸發了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事件？

回答

相關問題