为什么transitionend 事件在转换完成之前触发？答案

【问题标题】：Why is the transitionend event firing before the transition completes?为什么transitionend 事件在转换完成之前触发？
【发布时间】：2014-09-07 11:06:11
【问题描述】：

我正在尝试设计一个网站，其中不同的信息保存在不同的 div 中。用户单击一个链接，当前 div 淡出直到透明并向右平移，而新的 div 从左侧淡入。这个想法是调用一个函数，将“fadeOut”类添加到旧 div，将“fadeIn”类添加到新 div，然后从旧 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 事件没有正确触发。我看到很多人说它根本不适合他们，但是有谁知道当它过早触发时如何解决它？

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

编辑：

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

重置立即触发的原因（我的原始答案处理的主题）是您调用它而不是将其添加为事件侦听器。
你在过渡结束前调用show，所以调用reset时，fadein类被移除，新页面被隐藏。

我有 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);
}

【讨论】：

谢谢！您的解决方案完美无缺，但我有点迷茫。将函数 onHidden 传递给函数 hide 到底是做什么的？
这只是回调。完成时在 hide 函数内部调用它（内部的 done 参数）。它也可以是一个匿名函数，但是，当你给它一个函数名时，如果有错误，这个函数名将被打印在堆栈跟踪中。