Vahe Vahe - 1 month ago 9
AngularJS Question

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?

Answer

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

Comments