There is a meteor app.

Here is the code :

html:

<header id="header"> <div id="div1"></div> </header> <div id="div2"></div> <button id="reset">reset</button>

css:

 header { background: black; width: 100%; height: 60px; position: relative; } #div1 { background: yellow; width: 500px; height: 15px; position: absolute; right: 0; bottom: 0px; transition: all .5s; } #div2 { background: green; position: fixed; width: 500px; height: 0; right: .5%; transition: all .5s; }

js:

 document.getElementById('header').onclick = function() { document.getElementById('div1').style.bottom = -110 + 'px'; document.getElementById('div2').style.height = 100 + 'px'; } document.getElementById('reset').onclick = function() { document.getElementById('div1').style.bottom = 0 + 'px'; document.getElementById('div2').style.height = 0; }

Idea:

when clicking on Heder, the coordinate of the first diva is lowered, and the height of the other diva appears. As a result, we have an analog of the sliding panel (everything is elementary). BUT: in Meteor, this code is not executed in parallel, but somehow awfully crooked: the first div falls faster than the height of the second increases. While the transition the same duration. I tried through &.animate - the same thing, everything is crooked, the blocks are animated independently of each other.

How to be? need a regular sliding panel, but does not work in any ...

Brothers! He spent the whole night on resolving this issue, but he still did not move a drop. Going to work not having slept. Find out the solution will be the best event for today!

  • screencast-o-matic.com/watch/cDiqh8iBOO for clarity, captured video from the screen. it only works like this that I have already tried to do. - Oner Ksor
  • My Chrome 51 on Ubuntu pen works as it should, nothing is buggy. Most likely, you have something parallel to the heavy running, which frizzit interface. - Alexey Ukolov
  • @ AlekseyUkolov, that's just the point! Pen works as it should for me. but the same code in the meteor works crookedly (as in the video). and what's the matter - I can not figure it out, this is already a matter of principle. - Oner Ksor
  • That is, do you expect that a description of the incorrectly working code is enough to solve your problem? Given that the squeeze out of this code, which you did bring in the question, works as it should? - Alexey Ukolov
  • @AlekseyUkolov, the fact is that to solve my problems, I gave all the available code. see: there is a simple html code (3 blocks), styles for them and a click handler on js. This code works correctly if you collect all three files (or here I put it on the pen). BUT: the same code executed inside the meteor application does not work correctly, namely the animation is performed non-parallel. From here, the only possible conclusion is that the same thing inside the Meteor needs to be implemented / wrapped in some other way. I ask the community for help, because I have tried all the options myself. The dog is buried in a meteor, that's all I understood - Oner Ksor

0