如何设置CSS过渡到新元素或使用JavaScript执行相同操作
[英]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: 
我看到一个CSS3菜单有一个非常好的过渡：
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具有单击行的jQuery选择器的值）：
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? 而不是slideDown如何将上述css转换应用于新添加的表行或是否有javascript等效？
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? 没有slideDown效果，我在这里缺少什么？
5 个解决方案
解决方案1
5 2012-10-19 21:09:23
So, above solution would do this using jquery animate library. 因此，上面的解决方案将使用jquery animate库来完成此操作。 This can also be done using css3. 这也可以使用css3完成。
I haven't tweaked the code for any fancy behaviour, I hope the idea is clear: 我没有调整任何花哨行为的代码，我希望这个想法很明确：
HTML: 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: 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: 和JS（仅用于动态添加行：
$('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/ 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.
需要包含TD内的数据，否则CSS3动画的现有实现将无效。 No IE browser support, ofcourse, Works in Chrome, FireFox and Safari.
没有IE浏览器支持，当然，适用于Chrome，FireFox和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/ BTW - 使用css动画可以自由地使用许多其他方式来播放动画，例如，基于font-size： http ： //jsbin.com/unacog/11/
解决方案2
2 2012-10-15 11:10:39
add some css to the stylesheet like 将一些css添加到样式表中
.transition{
transition: all 0.3s ease 0.1s;
}
then 然后
clickedTableRow.next().addClass('transition');
解决方案3
2 2012-10-25 19:52:58
"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. 然后slideDown父级显示新添加的子级。
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. 对于表行（ <tr> ），这将非常困难，因为表与<div>, <span>, <p>, etc.不同的块级元素类型 - 它是一个独特的野兽，并不是所有的浏览器都以同样的方式驯服它。 (Explained pretty well in this SO question ) （在这个SO问题中解释得很好）
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) http://jsfiddle.net/25uQr/ （是的，我花了太多时间）
For what you described in your post, I would have used a <ul>,<ol>, or <dl> . 对于你在帖子中描述的内容，我会使用<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. 他们的孩子的行为很像一个表行，但是是块级元素......所以操作非常简单，跨浏览器安全（ish）呃。
解决方案4
1 2012-10-19 09:20:12
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? 如果我正确理解这个问题，你是在动态地向你的表中添加一些内容（通过ajax？）而不是只是弹出表格的底部，你想要它滑出吗？
What you are missing is the hide() : 你缺少的是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. .slideDown(speed)是可替换的.show(speed) ，但是对于任一工作的元件需要被隐藏，无论是使用CSS（ display:none ）或通过.hide(speed)荷兰国际集团它。
[edit] [编辑]
Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property.
To fix, you need to wrap your content in a div and show that. 要修复，您需要将内容包装在div中并显示。 I have created a jsFiddle: 我创建了一个jsFiddle：
解决方案5
1 2012-10-25 08:00:10
http://jsfiddle.net/xMRhE/4/ 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: 和css幻灯片效果：
.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. 向下滑动的Instad，您只需将高度设置为正常高度的0到100％。
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. 这是通过添加表格行，元素，div或者它的基本类和“开始”类来完成的，该类为动画添加初始状态（或关键帧）的样式。 Shortly after you add the element to the dom, you remove the start keyframe class. 将元素添加到dom后不久，您将删除start keyframe类。
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. 然后，浏览器计算它的动画效果，使元素看起来像是由当时实际影响它的属性定义的下一个“帧”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.