css - 用于 ng-repeat 的 AngularJS CSS3 动画

Question

我的 CSS 是:

.fade-in-repeat {
    -webkit-animation: fadein 2s; /* Safari and Chrome */
       -moz-animation: fadein 2s; /* Firefox */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

我的 HTML 是:

  <tr class="fade-in-repeat" ng-repeat="transaction in transactions | orderBy:transaction.time">
    <td>
      <div class="row">
        <div class="col-lg-6">

所以随着元素的添加，我希望它们淡入。问题是有一个 FUOC在动画开始之前，这让它看起来像是在闪烁

Answer 1

只需将 opacity:0 添加到 .fade-in-repeat 的 CSS

Demo