Animate.css 按钮位置错误

Question

如果我尝试使用 Animate.css 制作动画，则按钮的定位有问题。
通常，它位于页脚，但在淡入淡出期间，它位于中心： https://jsfiddle.net/m4f1wen3/

我 1 周都想不出解决方案。

<div id="player">
 <header>
  ...
 </header>

 <main>
  ...
 </main>

 <footer>
  <button>Lass uns loslegen!</button>
 </footer>
</div>

我的目标是它在过渡到底部时像动画之后一样粘住。

Answer 1

CSS 中的选择器 footer 选择 player div 和 index div.[=15= 内的页脚]

在 footer 选择器

之后将其添加到您的 CSS

#player footer {
  position: relative;
}

解决问题。

Answer 2

动画 fadeInLeft 添加翻译属性到您的 div 并改变具有绝对定位的页脚的定位。

将此添加到您的样式中 sheet 它将起作用：

html, body, #index, #player {
  height: 100%;
}

这将使 html 正文和您的 div 填充页面高度并且页脚的底部定位将保持不变。

Answer 3

请将此样式替换为您的样式

header{height: 150px;}
main{height: 200px;}
footer{height:120px; bottom:0; position:relative; width:100%;}

Animate.css button is on wrong position