为什么标头转换在chrome和firefox中有效，但在edge中却无效？

Question

Im currently building this project for some pals. However, the transition that I use to move the whole page to the left, when the menubutton is clicked. This animation does work in chrome and Firefox but not in edge. Why is this?

header 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>

Some 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 */

}

All code is available at the site.

Any help is appreciated!

EDIT: What would be superb, is that the width changing of the page of the page is animatable. I could get this to work previously.

Answer 1

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