我正在尝试使用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;
}
答案 0 :(得分: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