Menu
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?
275
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:
The data within the TD needs to be wrapped, existing implemntation of CSS3 animate won't work otherwise.
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/
163
add some css to the stylesheet like
.transition{
transition: all 0.3s ease 0.1s;
}
then
clickedTableRow.next().addClass('transition');
answered Oct 12 '22 00:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With