Question

我现在已经搞乱了这段代码，而且我已经陷入困境了。我已经手工编写了大量代码，但现在正在使用HTML5，CSS3和Javascript来增加新功能。

我试图制作一个上下滑动的简单菜单。我有一个包含所有内容的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>

Answer 1

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";  

    }
   }

（添加了'toggle'功能）

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

Javascript CSS3：移动div容器

1 个答案: