Smooth animation in vue.js?

Question

Vue.js

Please help me with animation. It is necessary that the pages turn from bottom to top, as with a normal scroll. It works that way, but there is a pause between the first block being completely hidden and the second block appearing.
How can I make the second block follow immediately after the first? As with a normal scroll.
https://codepen.io/anon/pen/Wzopdy
Thanks!

Answer 1

https://jsfiddle.net/3pojduyk/

Answer 2

As an option, set the absolute positioning of the blocks:

.red {
  width: 100vh;
  height: 100vh;
  background: red;
  position: absolute;
}

.green {
  width: 100vh;
  height: 100vh;
  background: green;
  position: absolute;
}