AngularJS CSS3 Animations for ng-repeat

Question

My CSS is:

.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; }
}

My HTML is:

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

So as items are added, I want them to fade in. The problem is there is a FUOC before the animation kicks in, which makes it look like it's flickering

Zach Saucier · Accepted Answer · 2014-01-24 13:48:07Z

1

Just add opacity:0 to .fade-in-repeat's CSS

Demo

answered Jan 24, 2014 at 13:48

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS CSS3 Animations for ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related