模态动画问题答案

【问题标题】：Modal Animation issue模态动画问题
【发布时间】：2018-01-23 02:17:15
【问题描述】：

我正在尝试使用 Tweenmax 制作模态动画。它目前有动画，但我遇到的问题是我希望它从屏幕顶部动画到中间并停在那里。目前，它只是动画到中间。

HTML：

<button onclick="clickButton();">Testing</button>
<div id="container">
  <div class="background">
    <div class="modal">
      <h2>Testing Modal</h2>
      <p>Testing.</p>
    </div>
  </div>
</div>

JS：

clickButton = function() {
  TweenMax.to("#container", 0.3, {
    className: "+=active",
    ease: Power1.easeOut
  });
};

我曾尝试使用 CSS 来做到这一点：

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: top;
}
#modal-container.active .modal-background {
    vertical-align: center;
}

Codepen

【问题讨论】：

标签： javascript jquery html css gsap

【解决方案1】：

像这样更改您的transform

#container.active {
    transform: translateY(100%);
}

还有你的#container职位top和left

#container {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    top: -100%;
    left: 0;
    z-index: 1;
}

它可能会对您有所帮助，这是我的代码解决您的问题 Codepen

【讨论】：