用于ng-repeat的AngularJS CSS3动画

时间:2014-01-23 22:42:28

标签: css3 angularjs

我的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,这使它看起来像是在闪烁

1 个答案:

答案 0 :(得分:1)

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

即可

Demo