Animation with Requestanimationframe - Javascript

Question

Based on the Onedrive website, where there is a drop-down menu on the left side that when clicked on the div Onedrive it loads the menu down; and if clicked again it returned in the first state, that is the collected menu.

I’m trying to do this animation, only using Javascript only. After much research, I saw that it is not recommended to use some timer to make these kinds of animations. The Requestanimationframe is used for that. Follows the code where I’ve already managed to do most of what I want. I think what’s happening is that I can’t stop the animation at the right time, and therefore I can’t properly manipulate the cancelRequestAnimationFrame.

In the code, what I’m trying to do is when I click the square it goes down. When I click again it goes up. And just keep making these two moves, so that I can then make a menu based on this.

Thank you.

Answer 1

I see no need to use both javascript when it is possible to use styles for these tasks.

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>