div添加/刪除/樣式的CSS3過渡/動畫更改？

有沒有一種方法可以爲剛添加到窗口或從窗口中刪除的div創建CSS3轉換/動畫，或者只是指定其樣式？一種情況是選項卡控件，當點擊標籤標題時內容已經轉換;這通常是通過分配不同的CSS樣式到包含內容（無轉移）的股利做到這一點要顯示：div添加/刪除/樣式的CSS3過渡/動畫更改？

tabs-content > div{display:none;} 
    tabs-content > div.active{display:block;}

它發生，我認爲大多數的例子在那裏被觸發使用CSS3過渡通過：懸停。

來源

2011-06-07 mobileTofu

CSS不能像那樣觸發。你必須使用JavaScript來爲該元素添加一個類並讓CSS動畫化（我懷疑它會起作用），或者直接用JavaScript對其進行動畫處理。

我會選擇後者。

來源

2011-06-07 16:22:22 Blender

[示例（非選擇器）]（https://developer.mozilla.org/samples/cssref/transitions/sample1/） – mobileTofu 2011-06-07 17:11:36

基本上這個想法是有2種風格（你需要明確地設置你想要的屬性在每個樣式中設置動畫）並指定樣式以開始動畫到目標元素。然後，在頁面加載時，您會聽取元素的「transitionend」事件，然後在該處指定您希望動畫結束的樣式。 :) – mobileTofu 2011-06-07 22:38:13

對於過渡/動畫：我會使用jQuery，因爲您可以將事件委託給尚未創建的元素。你也有更多的控制，如果你使用jQuery添加/刪除元素，那麼你可以同時添加動畫。

CSS：

.elementInactive { 
    display:none; 
}

的jQuery：

$('tabs-content > div').hover(function() { 
    $(this).toggleClass('elementInactive'); 
});

對於換用另一個風格（不是一個動畫）：我會用樣式表:hover財產。對這個屬性的支持可以追溯到CSS3之前，所以它是一個安全的解決方案。 IE具有使用與一個 'DIV' 元素問題：懸停，所以使用一個 'A' 與顯示元件：塊來對待它像一個div：

CSS：

tabs-content > a:hover {display:block;} 
tabs-content > a {display:none;}

來源

2011-06-07 16:24:40 BumbleB2na

試試：

tabs-content > div{ 
    opacity:0; 
    -moz-opacity:0; 
    -webkit-opacity:0; 
    transition-duration:1s; 
    -moz-transition-duration:1s; 
    -webkit-transition-duration:1s; 
} 
tabs-content:active > div{ 
    opacity:1; 
    -moz-opacity:1; 
    -webkit-opacity:1; 
}

你可以在jsFiddle上看到這個活。

來源

2011-06-07 16:35:23 kongr45gpen

不適合我在鉻合作 – BumbleB2na 2011-06-07 16:50:24

哎呀，你點擊並按住 - 作品+1 – BumbleB2na 2011-06-07 16:51:22

如果你不想*點擊並按住*，你可以懸停或使用jQuery。試試這個：http://jsfiddle.net/kongr45gpen/7J2M6/4/ – kongr45gpen 2011-06-07 16:58:25

div添加/刪除/樣式的CSS3過渡/動畫更改？

回答

相關問題