Animation with RequestAnimationFrame - Javascript

Question

Animation with RequestAnimationFrame - Javascript

Navigation

#1 by (4 votes)

0

Based on the OneDrive site, where you have a drop-down menu on the left side that when clicked on the OneDrive div it loads the menu down; and if you clicked it back in the first state, which is the collapsed menu.

I'mtryingtomakethisanimation,onlyusingjustJavascript.Aftermuchresearch,Isawthatitisnotadvisabletousesometimertodothesetypesofanimations.TheRequestAnimationFrameisusedforthis.Followthe code where I've already been able to do much of what I want. I think what's happening is that I can not stop the animation in due time, and as a consequence, I can not properly handle cancelRequestAnimationFrame.

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

Thank you.

javascript

asked by anonymous 01.10.2015 / 21:21

1 answer

How to read an input in the loop loop [closed] Call PHP function in jQuery

score 4 · Accepted Answer

I do not see a need to use as much javascript as 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>