如何設置CSS過渡到新元素或使用JavaScript執行相同操作

Question

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

Answer 1

因此，上面的解決方案將使用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/

注意事項：

需要包含TD內的數據，否則CSS3動畫的現有實現將無效。
沒有IE瀏覽器支持，當然，適用於Chrome，FireFox和Safari。

BTW - 使用css動畫可以自由地使用許多其他方式來播放動畫，例如，基於font-size： http ： //jsbin.com/unacog/11/

Answer 2

將一些css添加到樣式表中

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

然后

clickedTableRow.next().addClass('transition');

Answer 3

“慢慢滑下一些新創建的內容的最佳方法是什么？”

將內容放在最初隱藏它的容器中。 然后slideDown父級顯示新添加的子級。

對於表行（ <tr> ），這將非常困難，因為表與<div>, <span>, <p>, etc.不同的塊級元素類型 - 它是一個獨特的野獸，並不是所有的瀏覽器都以同樣的方式馴服它。 （在這個SO問題中解釋得很好）

所以 - 如果是我 - 我會使我的表和單元格嚴格意義上的，並將表格包裝成可以隱藏行的內容（如果我被迫使用表格）：

http://jsfiddle.net/25uQr/ （是的，我花了太多時間）

對於你在帖子中描述的內容，我會使用<ul>,<ol>, or <dl> 。 他們的孩子的行為很像一個表行，但是是塊級元素......所以操作非常簡單，跨瀏覽器安全（ish）呃。

Answer 4

如果我正確理解這個問題，你是在動態地向你的表中添加一些內容（通過ajax？）而不是只是彈出表格的底部，你想要它滑出嗎？

你缺少的是hide() ：

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

.slideDown(speed)是可替換的.show(speed) ，但是對於任一工作的元件需要被隱藏，無論是使用CSS（ display:none ）或通過.hide(speed)荷蘭國際集團它。

[編輯]

表行為動畫提供了特定的障礙，因為瀏覽器使用不同的值（表行和塊）作為其可見的顯示屬性。 沒有動畫的.hide（）和.show（）方法始終可以安全地與表行一起使用。 從jQuery版本1.1.3開始，也可以使用.fadeIn（）和.fadeOut（）。

要修復，您需要將內容包裝在div中並顯示。 我創建了一個jsFiddle：

http://jsfiddle.net/VXe6r/

Answer 5

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;
}

這是我的方法。 向下滑動的Instad，您只需將高度設置為正常高度的0到100％。

這是通過添加表格行，元素，div或者它的基本類和“開始”類來完成的，該類為動畫添加初始狀態（或關鍵幀）的樣式。 將元素添加到dom后不久，您將刪除start keyframe類。

然后，瀏覽器計算它的動畫效果，使元素看起來像是由當時實際影響它的屬性定義的下一個“幀”。

如何設置CSS過渡到新元素或使用JavaScript執行相同操作

問題描述

5 個解決方案

解決方案1
5 2012-10-19 21:09:23

解決方案2
2 2012-10-15 11:10:39

解決方案3
2 2012-10-25 19:52:58

解決方案4
1 2012-10-19 09:20:12

解決方案5
1 2012-10-25 08:00:10

如何設置CSS過渡到新元素或使用JavaScript執行相同操作

問題描述

5 個解決方案

解決方案1 5 2012-10-19 21:09:23

解決方案2 2 2012-10-15 11:10:39

解決方案3 2 2012-10-25 19:52:58

解決方案4 1 2012-10-19 09:20:12

解決方案5 1 2012-10-25 08:00:10

解決方案1
5 2012-10-19 21:09:23

解決方案2
2 2012-10-15 11:10:39

解決方案3
2 2012-10-25 19:52:58

解決方案4
1 2012-10-19 09:20:12

解決方案5
1 2012-10-25 08:00:10