幻燈片菜單不會滑動

我在css中創建了一個側邊菜單，並且想要使用變換：translateX（）屬性在頁面上打開和關閉它。我使用複選框來打開和關閉菜單。所以我想我可以使用JavaScript來使它的功能，但它不工作。你能通過javascript編輯transform屬性嗎？幻燈片菜單不會滑動

這裏的代碼...

window.onload = function() { 
     var toggle_btn = document.getElementById('toggle_btn'); 
     var slide_menu = document.getElementById('slide_menu'); 

     var checked = function() { 
      toggle_btn.checked = true; 
     }; 

     if (checked === true) { 
      slide_menu.style.transform = "translateX(0px)"; 
     } else { 
      slide_menu.style.transform = "translateX(-200px)"; 
     } 
    };

來源

2014-12-27 Alexander Manzano

請分享你的HTML/CSS作爲好。一個jsfiddle也可以幫助我們玩代碼併爲你的問題制定解決方案。 – JRulle

好吧給我一秒 –

也許它需要加油哈哈。最好使用'transform：none'順便說一句，或者完全移除樣式。只要確保你有通過CSS應用過渡 – vsync

嘗試：

window.onload = function() { 
    var toggle_btn = document.getElementById('toggle_btn'), 
     slide_menu = document.getElementById('slide_menu'); 

    slide_menu.style.transform = toggle_btn.checked=== true ? "none" : "translateX(-200px)"; 

};

順便說一句 - 你並不需要的JavaScript這樣的：http://jsfiddle.net/w5te8qqx/1/

來源

2014-12-27 21:35:57 vsync

幻燈片菜單不會滑動

回答

相關問題