6

我看到了一个 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 效果，我在这里缺少什么？

4

5 回答 5

5

因此，上述解决方案将使用 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>');
});

现场演示：

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

注意事项：

  1. TD 中的数据需要包装，否则 CSS3 动画的现有实现将无法正常工作。

  2. 当然，不支持 IE 浏览器，可在 Chrome、FireFox 和 Safari 中使用。

顺便说一句 - 使用 css 动画为许多其他方式播放动画提供了自由，例如，基于字体大小：http: //jsbin.com/unacog/11/

于 2012-10-19T21:09:23.657 回答
2

“让一些新创建的内容慢慢滑下来的最佳方式是什么？”

将内容放在最初隐藏它的容器中。然后slideDown父级显示新添加的子级。

这对于表格行 ( ) 将非常困难，<tr>因为表格与 a 不是同一类型的块级元素<div>, <span>, <p>, etc.——它是一种独特的野兽，并非所有浏览器都以相同的方式驯服它。（在这个 SO question中解释得很好）

所以——如果是我——我会让我的表格和单元格严格语义化，并将表格包裹在可以隐藏行的东西中（如果我被迫使用表格）：

http://jsfiddle.net/25uQr/（是的，我花了太多时间在上面）

对于您在帖子中描述的内容，我会使用<ul>,<ol>, or <dl>. 他们的孩子的行为很像一个表格行，但是是块级元素......所以操作非常简单，并且跨浏览器安全（ish）er。

于 2012-10-25T19:52:58.880 回答
2

在样式表中添加一些 CSS，例如

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

然后

clickedTableRow.next().addClass('transition');
于 2012-10-15T11:10:39.053 回答
1

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

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

还有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;
}​

这是我的方法。除了向下滑动，您只需将高度设置为正常高度的 0% 到 100%。

这是通过添加表格行、元素、div 或您拥有的基本类和“开始”类来完成的，该类为动画添加初始状态（或关键帧）的样式。将元素添加到 dom 后不久，您将删除开始关键帧类。

然后浏览器计算它必须为元素设置什么动画以使元素看起来像是由当时实际影响它的属性定义的下一个“帧”。

于 2012-10-25T08:00:10.433 回答
1

如果我对问题的理解正确，您正在向表格动态添加一些内容（通过 ajax？），而不是仅仅在表格底部弹出，您希望它滑出吗？

您缺少的是hide()：

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

.slideDown(speed)是 的替代方法.show(speed)，但要使元素正常工作，需要使用 CSS ( display:none) 或通过.hide(speed)ing 隐藏元素。

[编辑]

表格行对动画提出了特殊的障碍，因为浏览器对其可见显示属性使用不同的值（表格行和块）。没有动画的 .hide() 和 .show() 方法始终可以安全地用于表格行。从 jQuery 版本 1.1.3 开始，也可以使用 .fadeIn() 和 .fadeOut()。

要修复，您需要将内容包装在 div 中并显示。我创建了一个 jsFiddle：

http://jsfiddle.net/VXe6r/

于 2012-10-19T09:20:12.947 回答