0

Com base no site do OneDrive, onde se tem um menu drop-down do lado esquerdo que quando clicado na div OneDrive ele carrega o menu para baixo; e se clicado novamente ele voltado no primeiro estado, que é o menu recolhido.

Imagem do OneDrive

Estou tentando fazer esta animação, só que usando apenas Javascript. Depois de muita pesquisa, vi que não é recomendável usar algum temporizador para fazer estes tipos de animações. O RequestAnimationFrame é usado para isso. Segue o código onde já consegui fazer boa parte do que desejo. Acho que o que está acontecendo é que não consigo parar a animação no devido momento, e, por consequência, não consigo manipular corretamente o cancelRequestAnimationFrame.

No código, o que estou tentando fazer é que quando eu clicar no quadrado ele vá para baixo. Quando clicar novamente ele vá para cima. E fique fazendo apenas estes dois movimentos, para que depois eu consiga fazer um menu com base nisto.

Obrigado.

1

1 Resposta 1

4

Não vejo necessidade em usar tanto o javascript quando é possível usar estilos para estas tarefas.

var acao = function(e) {
  if (!e.target.nextElementSibling.style.height)
    e.target.nextElementSibling.style.height = '0px';
  else
    e.target.nextElementSibling.style.height = '';
};
var sub = document.querySelectorAll('[role=sub]');
sub[0].addEventListener('click', acao);
sub[1].addEventListener('click', acao);
main {
  width: 300px;
  box-shadow: 0px 0px 30px;
  margin: 50px auto;
}
[role=sub] {
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid silver;
}
[role=sub]:hover {
  background: black;
  color: white;
}
div {
  transition: 0.5s;
}
[role=item] {
  line-height: 30px;
  margin-left: 15px;
  height: 150px;
  overflow: hidden;
}
<main>
  <div role="sub">OneDrive</div>
  <div role="item">
    <div>DADOS #01</div>
    <div>DADOS #02</div>
    <div>DADOS #03</div>
    <div>DADOS #04</div>
    <div>DADOS #05</div>
  </div>
  <div role="sub">Grupos</div>
  <div role="item">
    <div>GRUPO #01</div>
    <div>GRUPO #02</div>
    <div>GRUPO #03</div>
    <div>GRUPO #04</div>
    <div>GRUPO #05</div>
  </div>
</main>

2
  • Achei sua solução muito interessante mesmo. Me ajudou perfeitamente (diminui meu JS). Agora, por favor, me tire algumas dúvidas que ficaram: 1 - No Javascript, qual a lógica nas linhas 2, 3, 4 e 5? (Quando height for 0 ele faz alguma coisa? Caso contrário ... Enfim, fiquei com dúvida); 2 - Ao adicionar o addEventListener(acao) nas duas divs pensei que clicando numa div, automaticamente a outra também receberia o mesmo efeito que a de cima. Ou seja, os efeitos aconteceriam simultaneamente. Só que eu posso clicar no de cima e apenas o de cima move; o mesmo com o a de baixo. Obg Commented 2/10/2015 às 19:20
  • 1
    @WesleyRedfield a ideia destas linhas iniciais é fazer com que a propriedade do css transition: 0.5s; trabalhe, digo, as divs já possuem tamanhos definidos assim alterando esse valor para zero, no caso do exemplo, faz com que aconteça a animação. Já a duvida referente ao addEventListener, não executa todos ao mesmo momento por conta que na função depende somente da origem, não tem um vinculo especifico, essa parte e.target é o componente em si que recebeu a ação, só para ele que vai atuar.
    – Oracio
    Commented 5/10/2015 às 1:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .