CODEWITHSUNDEEP
javascriptjquerycsshtml-table
London
London

Reputation: 15274

How to set CSS transition to a new element or do the same with JavaScript

I saw one CSS3 menu which has very nice transition:

transition: all 0.3s ease 0.1s;

I want to apply the same transition to my table. I've got a table which on table row click, new row is appended after clicked row and it's displayed or hidden.

Like in the code below(clickedTableRow has value of jQuery selector for clicked row):

clickedTableRow.after('<tr style="display:none;"><td>some content</td></tr>');
clickedTableRow.next().slideDown(3000);

Instead of slideDown how can I apply the above css transition to newly added table row or is there javascript equivalent?

Question update:

Maybe I should rephrase. What is the best way to slide down slowly some newly created content?

It seems like:

clickedTableRow.after('<tr><td>some content</td></tr>').slideDown(3000);

Looks the same as: 

clickedTableRow.after('<tr><td>some content</td></tr>');

Without slideDown effect, what am I missing here?

Upvotes: 6

Views: 4258

Answers (5)

Dawson
Dawson

Reputation: 7597

"What is the best way to slide down slowly some newly created content?"

Put the content inside a container that initially hides it. Then slideDown the parent to reveal the newly added child.

This is going to be extremely hard with a table row (<tr>) because a table isn't the same type of block-level element as a <div>, <span>, <p>, etc. -- it is a unique beast, and not all browsers tame it the same way. (Explained pretty well in this S.O. question)

So -- if it were me -- I'd make my table and cells strictly semantic, and wrap the table in something that could hide the rows (if I were forced to use a table):

http://jsfiddle.net/25uQr/ (yes, I spent too much time on it)

For what you described in your post, I would have used a <ul>,<ol>, or <dl>. Their children act much like a table row, but are block-level elements... so manipulation is pretty straight forward, and cross-browser safe(ish)er.

Upvotes: 2

Vlad Nicula
Vlad Nicula

Reputation: 3696

http://jsfiddle.net/xMRhE/4/

$itemBeingAdded = $("<div class='inner start-animation'></div>");    
    $testTable.append($itemBeingAdded);
    setTimeout(function () {
        $itemBeingAdded.removeClass("start-animation");
    }, 100);

And the css slide effect:

.inner {
   height : 50px;
   -moz-transition: all 0.3s ease 0.1s;
   -webkit-transition: all 0.3s ease 0.1s;
   transition: all 0.3s ease 0.1s;
   background : #ded;
   border : 1px solid #999;
}

.inner.start-animation {
     height : 0px;
}​

This is my approach. Instad of sliding down, you just animate the height from 0 to 100% of the normal height.

This is done by adding the table row, element, div, or what have you with it's basic class and a "start" class, which adds the styles of the initial state(or keyframe) for the animation. Shortly after you add the element to the dom, you remove the start keyframe class.

The browser then calculates what it has to animate to make the element look like it's next "frame" defined by the properties that actually affect it at that time.

Upvotes: 1

JAR.JAR.beans
JAR.JAR.beans

Reputation: 10004

So, above solution would do this using jquery animate library. This can also be done using css3.

I haven't tweaked the code for any fancy behaviour, I hope the idea is clear:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slide Add Row</title>
</head>
<body>
<table>
    <tr><td>some content</td></tr>
</table>
</body>
</html>

CSS:

   div {
      -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    position:relative;
    }

    @-moz-keyframes slidein {
      from {
            top:-20px;
      }

      to {
            top:0px;
      }
    }

    @-webkit-keyframes slidein {
      from {
            top:-20px;
      }

      to {
            top:0px;
      }
    }

and JS (only for dynamically adding the rows:

$('table').on('click', function(){
  $tbody = $(this).find('tbody:last');
   $tbody.after('<tr><td><div>new</div></td></tr>');
});

A live demo:

http://jsbin.com/unacog/9/

Points to note:

  1. The data within the TD needs to be wrapped, existing implemntation of CSS3 animate won't work otherwise.

  2. No IE browser support, ofcourse, Works in Chrome, FireFox and Safari.

BTW - Using css animation gives freedom for many other ways to play with the animation, for instance, based on font-size: http://jsbin.com/unacog/11/

Upvotes: 5

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

If I am understanding the question right, you are dynamically adding some content to your table (via ajax?) and instead of just popping up at the bottom of the table, you want it to slide out?

What you are missing is the hide():

clickedTableRow.after('<tr><td>some content</td></tr>').hide().slideDown(3000);

.slideDown(speed) is an alternative to .show(speed), but for either to work the element needs to be hidden, either using CSS (display:none) or by .hide(speed)ing it.

[edit]

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

To fix, you need to wrap your content in a div and show that. I have created a jsFiddle:

http://jsfiddle.net/VXe6r/

Upvotes: 1

fuzionpro
fuzionpro

Reputation: 601

add some css to the stylesheet like

.transition{
  transition: all 0.3s ease 0.1s;
   }

then

clickedTableRow.next().addClass('transition');

Upvotes: 2

Related Questions