Question

我目前正在为一些好友建立this项目。但是，当点击menubutton时，我用来将整个页面向左移动的过渡。此动画适用于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 */

}

网站上提供所有代码。

感谢任何帮助！

编辑：什么是高超的，是页面的页面宽度变化是可动画的。我以前可以让这个工作。

Answer 1

Edge是一个非常新的浏览器，因此可能需要一段时间才能支持所有HTML / CSS / JS，并责怪浏览器。

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

1 个答案: