Javascript CSS3：移动div容器

Question

I've been messing with this code for awhile now and I'm stuck. 我已经把这段代码弄乱了一段时间，我陷入了困境。 I've done a lot of coding by hand but just now ramping up on the new things with HTML5, CSS3, and Javascript. 我已经完成了很多手工编码，但是现在使用HTML5，CSS3和Javascript进行了新的开发。

I'm trying to make a simple menu that slides up and down. 我正在尝试制作一个可以上下滑动的简单菜单。 I have a div that contains everything. 我有一个包含所有内容的div。 The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. div的溢出设置为隐藏，因此当菜单不在查看框中时，将无法看到它。 It can then animate in and out of the view box. 然后，可以在视图框内外进行动画处理。

I've been trying to do it with a Javascript function but it sounds like it's easier to just use CSS3 transitions? 我一直在尝试使用Javascript函数来完成此操作，但听起来仅使用CSS3过渡会更容易吗？ Any advice? 有什么建议吗？

My Javascript code is below. 我的Javascript代码如下。 I can't quite figure out how to do it with CSS3 transitions. 我不太清楚如何使用CSS3过渡。 Any advice would be much appreciated. 任何建议将不胜感激。

Html 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 Java脚本

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{

    }
}

Updated entire HTML/CSS/JavaScript 更新了整个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>

Answer 1

HTML: one additional class: 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: (very simple) CSS ：（非常简单）

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

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

*just added class and transition. *仅增加了类和过渡。

JS, much simpler: JS，简单得多：

function moveMenuDown(){


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

    }
   }

('toggle' functionality added) （添加了“切换”功能）

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

Javascript CSS3：移动div容器

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-11-02 16:48:26

Javascript CSS3：移动div容器

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-11-02 16:48:26

解决方案1
0 已采纳 2014-11-02 16:48:26