CODEWITHSUNDEEP
htmlcssangularjs
Vahe
Vahe

Reputation: 1841

How do I animate an entire table row in Angular without affecting the table row border?

I have a table relying upon changes that are made to individual table cells. If a table cell changes, I want to animate the cell, but also all other table cells.

I am using class name "ng-anmiate ng-enter"

My css for animating the row is as follows.

.ng-enter {
   -webkit-animation: fadeIn 2s;
   -moz-animation: fadeIn 2s;
   -ms-animation: fadeIn 2s;
   animation: fadeIn 2s;
}

When I animate the entire row, the border fades out then in (I don't want any animation on the border, only all cells of the table row).

How can I get this to work?

Upvotes: 2

Views: 911

Answers (1)

lino
lino

Reputation: 190

Ok is this the beahvior that you want? i added a span in td and then in css: 

.ng-enter span {
   -webkit-animation: fadeIn 2s;
   -moz-animation: fadeIn 2s;
   -ms-animation: fadeIn 2s;
   animation: fadeIn 2s;
}

Here the plunker: https://plnkr.co/edit/ZCv9M8QzW1jO5WzBj8OG?p=preview

Upvotes: 1

Related Questions