Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gary Griswold

Animate addition or removal of TR from TABLE

Go to solution Solved by Diaco,

Recommended Posts

I have a row (TR) in a table that contains only one cell (TD).  I would like to animate change the height of the cell to zero, before removing the row.  But I have not been able to get this to work.  I would also do the corresponding animation when a new row is inserted.

 

My apologies that the code-pen is not very good.  It is my first try.

 

I know this might be easier with divs, but I am using table in this application for rows and columns of data and I need the easy grouping capability that "rowspan" and "colspan" provide

See the Pen EVXvqP by garygriswold (@garygriswold) on CodePen

Link to post
Share on other sites

Hello , and Welcome to the GreenSock forum

 

I believe you were looking to use removeChild instead of removeNode

 

See the Pen zvzEoK by jonathan (@jonathan) on CodePen

function removeRow() {
  var row = document.getElementById("sectr");
  row.parentElement.removeChild(row);
  
  // or use deleteRow() method in javascript
  // the 1 is the index of the row
  // row.parentElement.deleteRow(1);
}

You can also try and use the javascript deleteRow method.

 

See the Pen ZbyXKQ by jonathan (@jonathan) on CodePen

 

You just pass it the index of the row, in your case that is 1, since deleteRow index is zero based.

row.parentElement.deleteRow(1);

Happy Tweening Gary!

 

Reference:

MDN deleteRow: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/deleteRow

  • Like 1
Link to post
Share on other sites

Thanks so much for fixing my silly error.  My only excuse is that I am accustomed to strongly typed compiled languages.

 

I still have a problem with the animation of the row being dropped.  I am trying to animate the height of the one cell in the row to height: 0, and then delete the row, but the tween isn't working.

Link to post
Share on other sites

It is not working on the table due to its display CSS property for table-row. So you can add opacity:0 to your tween.

 

or you can add autoAlpha:0 which is the same as opacity except it adds visibility:hidden at the end of animating the opacity to 0. which is better on performance.

 

Link to the CSSPlugin Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

autoAlpha

Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

  • Like 1
Link to post
Share on other sites

Jonathan,  Thanks so much for your input.  The opacity and/or autoAlpha did help, and I also found scaleY to be better than height.  The row shrinks nicely, but the rows below remain still until the row is removed, and then they jump up.  The result is a little jarring.  I guess the row removal looks better not animated.  Thanks for the help.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×