Javascript CSS3：移动div容器

我一直在搞这个代码一段时间，我卡住了。我手工编写了很多代码，但现在只是用HTML5，CSS3和Javascript来增加新的功能。Javascript CSS3：移动div容器

我试图做一个简单的菜单，上下滑动。我有一个包含一切的div。 div的溢出设置为隐藏状态，所以当菜单离开查看框时，它不能被看到。然后它可以在视图框中进出动画。

我一直在尝试使用Javascript函数来实现它，但它听起来像使用CSS3转换更容易？有什么建议？

我的Javascript代码如下。我无法弄清楚如何用CSS3转换来完成它。任何意见将不胜感激。

的Html

<header> 
<nav> 
<div id="mobileMenu" class="mobileMenu"> 
    <div id="mobileMenuWrapper" class="mobileMenuWrapper"> 
     <div style="height: 100px; width: 100%;"> 
      <div style="height: 100px; width: 100%; background-color: black; color: white;"> 
      Menu option<br>Menu option<br>Menu option 
      </div> 
     </div> 
     <div style="position: relative; height: 50px; width: 100%; left: 50px;"> 
      <div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a href="javascript:moveMenuDown();">Menu</a></div> 
     </div> 
    </div> 
</div> 
</nav> 
</header>

的Javascript

var startPosition = -100; 
var endPosition = 0; 
var speed = 2; 

function moveMenuDown(){ 
    // Get the element 
    menu = document.getElementById("mobileMenuWrapper"); 

    // Grab the element's current CSS top position 
    currentPosition = Number(menu.style.top.substr(0,(menu.style.top.length-2))); 

    // Compare the position and move it 
    if(currentPosition <= endPosition){ 

     // I'm stuck about the line below...how can I attach a CSS3 transition here? Or should I? 
     menu.style.MozTransition = ???; 

     // Here's my original code where I move the element manually 
     menu.style.top = (currentPosition + speed) + 'px'; 
     moveMenuDown(); 
    }else{ 

    } 
}

更新整个HTML/CSS/JavaScript的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Menu test</title> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<style> 
    .mobileMenu { 
     position: absolute; 
     height: 150px; 
     width: 250px; 
     top: 0px; 
     left: 50px; 
     overflow: hidden; 
    } 

    #mobileMenuWrapper { 
    margin-top:-100px; 
     transition: margin-top 0.5s ease; 
    } 

    #mobileMenuWrapper.show { 
    margin-top:0px; 
    } 
</style> 

<script type="text/javascript"> 
    function moveMenuDown(){ 

     menu = document.getElementById("mobileMenuWrapper hide"); 

     if(menu.className=="mobileMenuWrapper hide"){ 
      menu.className = menu.className.replace('hide','show'); 
     }else{ 
      menu.className = "mobileMenuWrapper hide"; 
     } 
    } 
</script> 
</head> 
<body> 

<header> 
<nav> 
<div id="mobileMenu" class="mobileMenu"> 
    <div id="mobileMenuWrapper" class="mobileMenuWrapper hide"> 
     <div style="height: 100px; width: 100%;"> 
      <div style="height: 100px; width: 100%; background-color: black; color: white;"> 
      Menu option<br>Menu option<br>Menu option 
      </div> 
     </div> 
     <div style="position: relative; height: 50px; width: 100%; left: 50px;"> 
      <div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a href="javascript:moveMenuDown();">Menu</a></div> 
     </div> 
    </div> 
</div> 
</nav> 
</header> 

</body> 
</html>

来源

2014-11-02 flasshy

你应该只使用CSS完全。为什么你会在这种情况下使用JS脚本来添加CSS转换？我的建议：摆脱这个JS。 – rnevius 2014-11-02 16:09:55

我不确定。我不熟悉CSS3转换以及它们如何工作。我会研究并找出它们。谢谢。 – flasshy 2014-11-02 16:10:44

@flasshy，你可以发布当前的HTML/CSS吗？你如何激活上/下滑动？（点击或悬停）？ – sinisake 2014-11-02 16:20:07

HTML：一个额外的类：

<header> 
<nav> 
<div id="mobileMenu" class="mobileMenu"> 
    <div id="mobileMenuWrapper" class="mobileMenuWrapper hide"> 
     <div style="height: 100px; width: 100%;"> 
      <div style="height: 100px; width: 100%; background-color: black; color: white;"> 
      Menu option<br>Menu option<br>Menu option 
      </div> 
     </div> 
     <div style="position: relative; height: 50px; width: 100%; left: 50px;"> 
      <div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a id="move" href="javascript:moveMenuDown();">Menu</a></div> 
     </div> 
    </div> 
</div> 
</nav> 
</header>

CSS：（很简单）

#mobileMenuWrapper{ 
margin-top:-100px; 
    transition: margin-top 0.5s ease; 
} 

#mobileMenuWrapper.show{ 
margin-top:0px; 
}

*刚添加类和过渡。

JS，简单得多：（加入 '切换' 功能）

function moveMenuDown(){ 


menu = document.getElementById("mobileMenuWrapper"); 
    if(menu.className=="mobileMenuWrapper hide"){ 
    menu.className = menu.className.replace('hide','show'); 
    } 
    else { 
     menu.className = "mobileMenuWrapper hide"; 

    } 
    }

小提琴：http://jsfiddle.net/8u0eka5x/

来源

2014-11-02 16:48:26 sinisake

非常感谢！我会尝试这种方法，但有一个问题，为什么您使用margin-top而不是top？ – flasshy 2014-11-02 16:51:52

由于职位：相对（默认位置，不知道你的CSS结构 - >为演示目的 - 这工作正常，顶部不太好）...编辑：http://jsfiddle.net/8u0eka5x/1/'顶部“版本... – sinisake 2014-11-02 16:53:45

我使用的是position：absolute，因为我需要这个容器重叠元素。如果我使用亲戚，它会推动其他元素，对吧？我知道，当你看不到我的整个html时，这是一个难以问的问题。我会弄清楚。我感谢您的帮助！ – flasshy 2014-11-02 17:00:05

Javascript CSS3：移动div容器

回答

相关问题