javascript和CSS過渡屬性在Firefox上不起作用

Question

我在這里從瀏覽器菜單中使用幻燈片菜單菜單中的幻燈片。 我已經按照給出的所有說明進行了操作。最后它已經開始工作，但僅在chrome和safari瀏覽器上有效，但我的主要目標是在Firefox上啟動它，我通過更改一些CSS並修改JavaScript嘗試了幾件事。我已經給JavaScript提供了alert（）來測試它是否在腳本內移動，並且我發現所有警報都是按完美的順序執行的。 我沒有得到任何提示為什么這件事發生。 以下是帶有html page，JavaScript和CSS的代碼

HTML頁面

<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上具有魅力，但在移動Firefox瀏覽器上卻無法順利運行。

Answer 2

嘗試從Webkit行中刪除/* */ （希望它能正常工作），但我發現它尚未對所有瀏覽器都可用

javascript和CSS過渡屬性在Firefox上不起作用

問題描述

2 個解決方案

解決方案1
2 已采納 2015-08-17 12:16:33

解決方案2
-2 2015-08-17 05:26:43

javascript和CSS過渡屬性在Firefox上不起作用

問題描述

2 個解決方案

解決方案1 2 已采納 2015-08-17 12:16:33

解決方案2 -2 2015-08-17 05:26:43

解決方案1
2 已采納 2015-08-17 12:16:33

解決方案2
-2 2015-08-17 05:26:43