CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
Dwza
Dwza

Reputation: 6565

Bootstrap Table animation on TR doesnt work

I have a bootstrap table and actually I want to remove a row. But if I do this, it doesnt look smooth to simply remove it so I thought... hey just use an animated .hide():

$('.myTR').hide('slow', function(){
    $(this).remove();
});

this actually has the same result. The row gets hide slowly and the next bottom row just pops up.

Next try was to animate the hight of the row: 

$('.myTR').animate({
   height: "0px"
}, 1500 );

Doesnt work... Actually it works... but only if I make it bigger...

Is there a Trick to do that ?

Here is my fiddle

In this fiddle you have to click the row to expand it and than you can see the rows of an other table with the glyphicon-trash icon. Clicking on the Icon turn hight into 0px.

Edit:

More try's fiddle

here I tried to give the row a display attribute... and I have a reaction but it still looks freaky ^^

Upvotes: 0

Views: 2687

Answers (2)

Dwza
Dwza

Reputation: 6565

It took me some time but now I know how to do the trick.

Here is the solution for all who looking for this...

(The trick is animating all containing td's)

$('.myTR').children('td').animate({
    'font-size': 0,   //needed
    opacity:0,        //optional but looks smoother
    height:0,         //needed
    padding:0         //needed
},function(){
    $('.myTR').remove();
});

In my script I have an icon in a TD. If I click on it I want the table-row to get hide smoothly. So I get the above tr like .closest('tr'). But simply animate the tr height doesnt work since there are some elements in the tr with some css settings. e.g. font-size or padding.

So to solve this, selecting all td in the tr is needed (.children('td')). Than the .animate() works as expacted. See sample above or this FIDDLE

Upvotes: 2

vals
vals

Reputation: 64174

One posibility is to remove effectively the row, but at the same time transform the rows under it inthe Y direction, so that they don't move.

You need to know the row height before hand

If this transform is set inside an animation, then you set it to 0 afert the time that you consider

fiddle

$('.glyphicon-trash').on('click', function(){
    $(".test").removeClass('test');
    $(this).closest("tr").nextAll().addClass('test');
    $(this).closest("tr").remove();
});

.test {
    -webkit-animation: move 1s;
    animation: move 1s;
}

@-webkit-keyframes move {
    0% {transform: translateY(23px);}
  100% {transform: translateY(0px);}
}

@keyframes move {
    0% {transform: translateY(23px);}
  100% {transform: translateY(0px);}
}

Notice that for this to work a second time, the test class should be removed in a timeout after the animation has happened. The method that I used in the fiddle won't work reliably

Upvotes: 1

Related Questions