Lon*_*don 6 javascript css jquery html-table
我看到一个CSS3菜单有一个非常好的过渡:
transition: all 0.3s ease 0.1s;
我想将相同的过渡应用到我的表中.我有一个表,在表行上单击,在单击行后添加新行,它显示或隐藏.
就像在下面的代码中一样(clickedTableRow具有单击行的jQuery选择器的值):
clickedTableRow.after('<tr style="display:none;"><td>some content</td></tr>');
clickedTableRow.next().slideDown(3000);
而不是slideDown如何将上述css转换应用于新添加的表行或是否有javascript等效？
问题更新:
也许我应该改写.缓慢滑下一些新创建的内容的最佳方法是什么？
这好像是:
clickedTableRow.after('<tr><td>some content</td></tr>').slideDown(3000);
看起来像:
clickedTableRow.after('<tr><td>some content</td></tr>');
没有slideDown效果,我在这里缺少什么？
因此,上面的解决方案将使用jquery animate库来完成此操作.这也可以使用css3完成.
我没有调整任何花哨行为的代码,我希望这个想法很明确:
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;
}
}
和JS(仅用于动态添加行:
$('table').on('click', function(){
$tbody = $(this).find('tbody:last');
$tbody.after('<tr><td><div>new</div></td></tr>');
});
现场演示:
注意事项:
需要包含TD内的数据,否则CSS3动画的现有实现将无效.
没有IE浏览器支持,当然,适用于Chrome,FireFox和Safari.
BTW - 使用css动画可以自由地使用许多其他方式来播放动画,例如,基于font-size:http: //jsbin.com/unacog/11/
添加一些CSS到样式表中，例如
.transition{
transition: all 0.3s ease 0.1s;
}
然后
clickedTableRow.next().addClass('transition');