Question

我在这里使用浏览器中的幻灯片菜单脚本Slide in menu。我已按照给出的所有说明进行操作。最后它已开始工作但仅限于chrome和safari浏览器，但我的主要目标是让它从Firefox开始，我已经通过改变一些CSS和修改JavaScript来尝试了几件事，在JavaScript中，我已经给出了alert（）来测试它是否正在移动到脚本中，并且我发现所有警报都以完美的顺序执行。我没有得到任何暗示为什么会发生这件事。下面是带有html页面，JavaScript和css的代码

html page

<html>
<head>

<link rel="stylesheet" type="text/css" href="css/new.css">
<script type="text/javascript" src="js/slideinmenu.js"></script>

<script type="text/javascript"> 
var menu;
function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); 

e.stopPropagation(); });
    menu = new slideInMenu('slidedownmenu', true);
}
document.addEventListener('DOMContentLoaded', loaded);
</script>
</head>

<body>
<div id="slidedownmenu">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
    <div class="handle"></div>
</div>

<div id="content">


    <p>Click to <a href="#" onclick="menu.open();return false">Open</a>, <a 

href="#" onclick="menu.close();return false">Close</a> and <a href="#" 

onclick="menu.toggle();return false">Toggle</a> the menu programmatically.</p>
</div>

</body>
</html>

JavaScript

 function slideInMenu (el, opened) {
    this.container = document.getElementById(el);
    this.handle = this.container.querySelector('.handle');
    this.openedPosition = this.container.clientHeight;
    this.container.style.opacity = '1';
    this.container.style.top = '-' + this.openedPosition + 'px';
    this.container.style.webkitTransitionProperty = '-webkit-transform';
    this.container.style.webkitTransitionDuration = '400ms';
    if ( opened===true ) {
        this.open();
    }
    this.handle.addEventListener('touchstart', this);
}
slideInMenu.prototype = {
    pos: 0,
    opened: false,
    handleEvent: function(e) {
        switch (e.type) {
            case 'touchstart': this.touchStart(e); break;
            case 'touchmove': this.touchMove(e); break;
            case 'touchend': this.touchEnd(e); break;
        }       
    },
    setPosition: function(pos) {
        this.pos = pos;
        this.container.style.webkitTransform = 'translate(0,' + pos + 'px)';
        if (this.pos == this.openedPosition) {
            this.opened = true;
        } else if (this.pos == 0) {
            this.opened = false;
        }
    },
    open: function() {
        this.setPosition(this.openedPosition);
    },
    close: function() {
        this.setPosition("0");
    },
    toggle: function() {
        if (this.opened) {
            this.close();
        } else {
            this.open();
        }
    }
}

CSS

    a{
    color:#ffc;
}
ul, li, div {
    margin:0;
    padding:0;
    list-style:none;
}
#content {
    padding:40px 10px 10px 10px;
    text-align:center;
    text-shadow:0 1px 1px #000;
    font-size:1.2em;
}
#slidedownmenu {
    position:absolute;
    width:100%;
    height:115px;
    left:0;
    background:black url(drawer-bg.jpg);
}
#slidedownmenu .handle {
    position:absolute;
    bottom:-28px;
    left:0;
    width:100%;
    height:28px;
    border-top:1px solid #532500;
    border-bottom:1px solid #111;
    background-color:maroon;
    background:url(handle.png) no-repeat 50% 50%, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e07b29), color-stop(0.1, #b85300), color-stop(0.8, #793600));
/*  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.7);*/
}
#slidedownmenu ul {
    display:block;
    width:auto;
}
#slidedownmenu li {
    display:block;
    float:left;
    margin:20px 10px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    text-shadow:0 1px 1px #000;
}

任何类型的建议都将不胜感激。

Answer 1

我找到了上述问题的解决方案，实际上是的，webkit适用于safari，但Firefox，Chrome，Internet-Explorer 10支持标准语法，即上面的JavaScript

   this.container.style.webkitTransitionProperty = '-webkit-transform';

替换为

  this.container.style.transitionProperty = 'transform';

类似地

  this.container.style.webkitTransitionDuration = '400ms';

到

  this.container.style.transitionDuration = '400ms';

和

this.container.style.webkitTransform = 'translate(0,' + pos + 'px)';

到

this.container.style.transform = 'translate(0,' + pos + 'px)';

并为Firefox桌面浏览器做好准备。

基本上，现在我已经遵循标准语法，而不是使用在Firefox桌面浏览器中工作得非常好的webkit.Firefox支持标准样式语法，因此根据此搜索，当转换不在Firefox上时，只需使用标准语法css如果你想让它在Firefox上运行，我测试了它，它的工作就像桌面火狐上的魅力，但在移动Firefox浏览器上并不顺畅。

Answer 2

尝试从webkit行中删除curl -X DELETE \ https://saturnapi.com/cron/jobs/YOUR_JOB_ID \ -H saturnapi-access-key:'YOUR_SATURNAPI_ACCESS_KEY' \ /*（希望它有效），我发现它还没有适用于所有浏览器

javascript和css过渡属性将无法在Firefox上运行

2 个答案: