CODEWITHSUNDEEP
javascriptcssvue.js
kabugh
kabugh

Reputation: 315

TranslateY animation bugging

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);
  }

Upvotes: 0

Views: 100

Answers (1)

Benjaco
Benjaco

Reputation: 303

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.

Upvotes: 1

Related Questions