javascript and css transition property won't work on firefox

Question

I am using a Slide in menu script on browser from here Slide in menu . I have followed all the instruction as given.Finally it has started working but only on chrome and safari browser, But my main target is to get it start on Firefox, I have tried several things by changing some CSS and modifying the JavaScript, In the JavaScript I have given alert() to test exactly it is moving inside the script or not, and I found that all the alerts are executed in perfect sequence. I am not getting any hint why this thing happened. Below is the code with html page , JavaScript and 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>

the 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;
}

Any type of suggestion would be appreciated.

Answer 1

I have found the solution for above issue,Actually yes the webkit is for safari but standard syntax are supported by Firefox,chrome,Internet-Explorer 10, that is, In above JavaScript

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

replaced with

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

Similarly

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

to

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

and

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

to

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

and its ready for Firefox desktop browser.

Basically, now I have followed the standard syntax,rather than using webkit which is working perfectly fine in Firefox desktop browser.Firefox supports standard style syntax, So according to this search when transitions not working on Firefox simply use the standard syntax for css if you want to get it work on Firefox,I tested it and its working like a charm on desktop Firefox but not smoothly on mobile Firefox browser.

Answer 2

尝试从Webkit行中删除/* */ （希望它能正常工作），但我发现它尚未对所有浏览器都可用

javascript and css transition property won't work on firefox

Question

2 answers

solution1
2 ACCPTED 2015-08-17 12:16:33

solution2
-2 2015-08-17 05:26:43

javascript and css transition property won't work on firefox

Question

2 answers

solution1 2 ACCPTED 2015-08-17 12:16:33

solution2 -2 2015-08-17 05:26:43

solution1
2 ACCPTED 2015-08-17 12:16:33

solution2
-2 2015-08-17 05:26:43