Javascript CSS3：移动div容器 [英] Javascript CSS3: Move div container
问题描述
我一直在搞乱这段代码已经一段时间了，我被卡住了。我已经用手工编写了很多代码，但是现在用HTML5，CSS3和Javascript来增加新的东西。
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.
我试图做一个简单的菜单，上下滑动。我有一个div，包含一切。 div有溢出设置为隐藏，所以当菜单在视图框外面，它不能看到。
I'm trying to make a simple menu that slides up and down. I have a div that contains everything. The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. It can then animate in and out of the view box.
我一直在尝试使用Javascript函数，但它听起来像更容易使用CSS3过渡？任何建议？
I've been trying to do it with a Javascript function but it sounds like it's easier to just use CSS3 transitions? Any advice?
我的Javascript代码如下。我不能弄清楚如何使用CSS3转换。非常感谢任何建议。
My Javascript code is below. I can't quite figure out how to do it with CSS3 transitions. Any advice would be much appreciated.
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
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
Updated entire 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>
推荐答案
HTML：另外一个类：
HTML: one additional class:
<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 :(非常简单）
CSS: (very simple)
#mobileMenuWrapper{
margin-top:-100px;
transition: margin-top 0.5s ease;
}
#mobileMenuWrapper.show{
margin-top:0px;
}
*只是添加类和转换。
*just added class and transition.
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/
这篇关于Javascript CSS3：移动div容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
