Odtnhj

I have a box that I would like to expand (100% height) after click, and then collapse and stick to bottom. I made a function (vue framework structure) to run the animation, but unfortunately it keeps on bugging.. how do I make it more smooth and less buggy? Demo: Fiddle.

JS:

animate() 
 let height_ = window.innerHeight - this.$refs.box.getBoundingClientRect().top
 if(!this.revealed) 
 event.target.style.maxHeight = '100%';
 event.target.style.transform = 'translateY(0px)'
 this.revealed = true
 
 else if(this.revealed) 
 console.log(height_)
 event.target.style.maxHeight = height_ - 570 + 'px'
 event.target.style.transform = 'translateY(570px)'
 this.revealed = false
 
 

CSS:

.grid 
 width: 100vw;
 height: 100vh;
 display: grid;
 grid-template-rows: 30% 32% 16% 22%;
 grid-template-columns: 47% 29% 24%;
 
.section__extra 
 grid-area: 1 / 3 / 5 / 2;
 background-color: black;
 position: relative;
 z-index: 1000;
 left: -2vw;
 transform: translateY(570px);
 display: flex;
 flex-flow: column;
 -webkit-transition: all 1.3s cubic-bezier(0.86, 0, 0.07, 1);
 transition: all 1.3s cubic-bezier(0.86, 0, 0.07, 1);
 

The solution to this issue was to not animate 2 radical different properties with a none linear curve.
The solution ended up with always having the box at 100vh, hide the overflow, and only animate the transform. (Which also is better for the performance).
See the comment thread for more information.