Olá pessoal. Estou iniciando com JavaScript e gostaria da ajuda de vcs.
Estou construindo um menu e gostaria de animar os tópicos do menu de maneira que eles se desloquem horizontalmente tendo um delay entre o primeiro e o segundo , outro maior entre o segundo e o terceiro, e assim por diante. Aparecendo um de cada vez.
O exemplo abaixo esta funcionando, mas os tópicos do menu aparecem todos ao mesmo tempo.
<!DOCTYPE html>
<html>
<title>
</title>
<head>
</head>
<style>
.menu{position:absolute; margin-top:0em;}
ul{position:absolute; margin-top:3em;}
li{transform:translateX(-500%); transition:all 1s ease-in-out; list-style: none;}
#result{width:100%; position:absolute; z-index:99; margin-top:1em; margin-left:6em; color:green;}
.p_on{width:100%; position:absolute; z-index:99; margin-top:0.5em; margin-left:1.2em; color:white; display:block;}
.p_off{width:100%; position:absolute; z-index:99; margin-top:0.5em; margin-left:1.2em; color:black; display:block;}
input{display:none;}
label{cursor:pointer; display:block;}
.menu_on{width:5em; height:2em; margin-top:0em; background-color:black; position:absolute; z-index:98;}
.menu_off{width:5em; height:2em; margin-top:0em; background-color:yellow; position:absolute; z-index:97;}
#menu_input_on_id:checked ~ label .menu_off{z-index:99;}
#menu_input_off_id:checked ~ label .menu_on{z-index:99;}
</style>
<body>
<input type="radio" name="menu_input" id="menu_input_on_id" onclick="move_on()">
<input type="radio" name="menu_input" id="menu_input_off_id" onclick="move_off()">
<label for="menu_input_on_id"><div class="menu_on"><p class="p_on">clicar</p></div></label>
<label for="menu_input_off_id"><div class="menu_off"><p class="p_off">clicar</p></div></label>
<div class="menu">
<ul>
<li>OBJETO</li>
<li>OBJETO</li>
<li>OBJETO</li>
<li>OBJETO</li>
<li>OBJETO</li>
</ul>
</div>
<p id="result">teste</p>
<script>
var totalNumber;
var i;
var x;
function contando(){
totalNumber = document.getElementsByTagName("li").length;
document.getElementById("result").innerHTML = totalNumber;
}
function translate_on(){
x = document.querySelectorAll("li");
for(i = 0; i < totalNumber; i++){
x.style.transform = "translateX(0%)";
}
}
function translate_off(){
x = document.querySelectorAll("li");
for(i = 0; i < totalNumber; i++){
x.style.transform = "translateX(-500%)";
}
}
function move_on(){contando(); translate_on();}
function move_off(){contando(); translate_off();}
</script>
</body>
</html>