如何在 ng-animate 或 Animate.css 中调整fadeInUp 的高度？答案

【问题标题】：How to adjust the height for fadeInUp in ng-animate or Animate.css?如何在 ng-animate 或 Animate.css 中调整fadeInUp 的高度？
【发布时间】：2015-10-21 17:31:36
【问题描述】：

对于大多数人来说，这可能是一个非常简单的问题，但我很难弄清楚这一点。

我有一个足够大的数据表，可以运行整个屏幕。它非常具体，因此分页是不可能的。我遇到的问题是动画。我在 div 内有带有 ng-view 的表格。我想要fadeInUp 动画，这样fadeInUp 似乎距离顶部大约60-100px。但是，当前的 fadeInUp 从我不想要的屏幕底部向上滑动。我怎样才能使它从所需的高度向上滑动？

<div ng-view class="content-wrapper ng-fadeInUp">

[ng-view].ng-enter{ animation:fadeInUp 1s; }

这就是它从屏幕底部向上滑动的原因。我尝试使用做同样事情的“Animate.css”。我想要它，这样它似乎几乎不会向上滑动。只是一点点动画而不是完整的幻灯片。

【问题讨论】：

标签： angularjs ng-animate animate.css

【解决方案1】：

从示例 animate.css 中获取 original CSS 并对其进行修改：

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

把translate3d中的第二个参数改成你想要的，例如：

transform: translate3d(0, 20px, 0);

演示： http://plnkr.co/edit/W5zsmhYkwXxYJbuft5pu?p=preview

【讨论】：

谢谢。这正是我所需要的。