我看到一个 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);
我怎样才能将上述 css 转换应用于新添加的表格行，而不是 slideDown 或者是否有等效的 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 。
顺便说一句——使用 css 动画可以自由地使用许多其他方式来播放动画，例如，基于字体大小: http://jsbin.com/unacog/11/
关于javascript - 如何将 CSS 过渡设置为新元素或使用 JavaScript 执行相同操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12894171/