为什么标题转换在 chrome 和 firefox 中有效，但在边缘无效？答案

【问题标题】：Why is header transition working in chrome and firefox, but not in edge?为什么标题转换在 chrome 和 firefox 中有效，但在边缘无效？
【发布时间】：2015-10-28 21:55:03
【问题描述】：

我目前正在为一些朋友构建this 项目。但是，当单击菜单按钮时，我用来将整个页面向左移动的过渡。此动画在 chrome 和 Firefox 中有效，但在边缘无效。这是为什么呢？

标题 HTML：

<div id="page" class="">
    <div class="wow fadeIn" data-wow-duration="1s">
        <header class="fixed topheader">
            <div class="leftheader toplist">
                <a id="logo" href="#">23-RuleZ</a>
            </div>
            <nav id="navbar" >
                <ul class="menulist nav">
                    <li class="menuitem topitem"><a href="#Join" class="toplist">Join 23-RuleZ</a></li>
                    <li class="menuitem topitem"><a href="#blog" class="toplist">Blog</a></li>
                    <li class="menuitem topitem"><a href="clanwar/" class="toplist">Clanwar</a></li>
                    <li class="menubutton topitem"><a  id="sidemenu" class="topbutton" href="javascript:void(0)">  &#9776; </a></li>
                </ul>
            </nav>
        </header>

一些JS：

  var a = document.getElementById("sidemenu");
  a.onclick = function() {
        if ($('#page').hasClass('moved')){
            $('header').removeClass('moved');
        }
        else {
            $('header').addClass('moved');
        }
        $('#page').toggleClass('moved');
        $('.sidebar').toggleClass('visible');
        $('#sidemenu').toggleClass('error redbottom');
    return false;
  }
}

CSS：

.bodyheader {
    background-color: #efefef;
    height: 60px;
    border-bottom: 3px solid #CCC;
        transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;    /* FF3.7+ */
      -o-transition: all 0.5s ease;      /* Opera 10.5 */
      -webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */

}

.topheader {
    height: 80px;
    color: #FFF;
    font-weight:700;
    font-size:20px;
    border-bottom: 1px solid #666;
    transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;    /* FF3.7+ */
      -o-transition: all 0.5s ease;      /* Opera 10.5 */
      -webkit-transition: all 0.5s ease; /* Saf3.2+, Chrome */

}

所有代码都可以在网站上找到。

感谢任何帮助！

编辑： 最棒的是页面的宽度变化是动画的。我以前可以让它工作。

【问题讨论】：

标签： javascript html css google-chrome css-transitions

【解决方案1】：

Edge 是一个相当新的浏览器，因此可能需要一段时间才能支持所有 HTML/CSS/JS，请归咎于浏览器。

【讨论】：

转换正在工作，只是不在标题处。例如，边栏以动画方式向左移动。