Question

点击后，我有一个想要扩展的框（高度为100％），然后折叠并固定在底部。我制作了一个函数（Vue框架结构）来运行动画，但是不幸的是，它一直在出错。.如何使它更平滑和更少出错？演示：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);
  }

Answer 1

此问题的解决方案是不使用无线性曲线为2个根本不同的属性设置动画。最后，解决方案始终将框置于100vh，隐藏溢出，仅对变换进行动画处理。（这对于性能也更好）。有关更多信息，请参见评论主题。

TranslateY动画错误

1 个答案: