Question

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

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

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

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

这是让它从屏幕底部向上滑动的原因。我尝试使用＆＃34; Animate.css＆＃34;它做了同样的事情。我想要它，好像它似乎几乎没有滑动。只是一点点动画而不是完全滑动。

Answer 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

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

1 个答案: