在僞類之前/之前爲CSS轉換屬性設置動畫效果

說我有：

#foo:after { 
    content: ''; 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: block; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
} 

#foo:hover:after { 
    width: 250px; 
    height: 250px; 
}

這甚至可能嗎？我一直在測試，到目前爲止我似乎無法找到解決方案。我試圖通過使用Modernizr來減少我需要的JavaScript支持。

我已經有一個JavaScript方法，所以請不要JavaScript替代。

演示：http://jsfiddle.net/MxTvw/

來源

2011-10-18 daryl

好問題。你在用什麼':: after'元素？ – Ryan

@minitech我使用它並不重要，它的上下文不會改變它是否工作。我已經有了注入div等JS的替代品，但我想，如果我不需要使用JS，爲什麼要使用它。因此，驚人的Modernizr;） – daryl

不，我的意思是「它顯然不會工作，所以也許有更好的CSS3替代品，你不知道」:) – Ryan

你的小提琴在我的Firefox中工作。據我所知，如果this article是最新的，這是唯一可以對僞元素進行動畫處理的瀏覽器。

編輯：截至2016年，鏈接，文章被打破，relevant WebKit bug爲fixed3年前。繼續閱讀以查看其他答案，這是過時的。

來源

2011-10-18 15:54:10 Litek

不要以爲你知道現代化的方式來檢測它是否可以動畫？ – daryl

如果我正確理解了modernizr的工作原理，它會測試元素樣式對象中的屬性。要使用僞元素來做到這一點，您需要一種方法來獲得僞元素的樣式對象，而我不可能做到這一點。但我可能（也希望是）錯了。如果有的話，請糾正我。 – Litek

此WebKit錯誤在昨天已修復：http://trac.webkit.org/changeset/138632 –

它does not seem to work現在，但是根據W3 specs你可以申請過渡到僞元素。也許將來有一段時間...

來源

2011-10-18 15:51:34 Lapple

谷歌瀏覽器中加入WebKit的bug修復到27.0.1453.110版米

這WebKit的錯誤是固定的：http://trac.webkit.org/changeset/138632

有可能動畫僞:before和:after，這裏有一對夫婦用於動畫僞造元素:before和:after的示例。

這裏就是你們的榜樣上面有一些修改，使得它在進出更加順暢動畫沒有模擬mouseleave/mouseout延遲懸停修改：

嘗試增加的主要選擇#foo在你的第二個:hover僞類規則中分組爲:hover僞類。同時添加transition財產，而不僅僅是供應商特定的前綴屬性transition：

#foo:after{ 
    display: block; 
    content: ''; 
    width: 200px; 
    height: 200px; 
    background: red; 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

#foo, 
#foo:hover:after, 
#foo:hover:before{ 
    width: 250px; 
    height: 250px; 
}

需要注意的是前進的任何僞元素，如:before和:after應該使用雙冒號語法::before和::after。這個例子模擬一個淡入和淡出使用覆蓋background-color和上懸停background-image：

http://jsfiddle.net/MxTvw/233/

這個例子模擬旋轉動畫上懸停：

http://jsfiddle.net/Jm54S/28/

當然前進用css3標準我們可以使用::before和::after。

這個工作在最新的火狐，Chrome，Safari，Opera或18+，IE10，IE11（IE9及以下不支持CSS3過渡或動畫。）

來源

2012-10-20 03:50:55

僞類不是僞元素。引入雙冒號語法的整個觀點是讓人們不會把兩者混淆起來。哦，這已經被多次提出，並且在WebKit中都不起作用。 – BoltClock

上面提到的問題關於'animate'pseudo：之前和之後：.. css3轉換在最新版本的WebKit中有bug。css3動畫和轉換動畫就好了.. [https://bugs.webkit.org/show_bug.cgi ？id = 23209] –

更正了錯誤鏈接：https：//bugs.webkit.org/show_bug.cgi？id = 23209，並且此http://trac.webkit.org/changeset/88308顯示了補丁已應用，但未工作的權利..還有一些變通辦法在這裏發現評論51 - http://code.google.com/p/chromium/issues/detail?id=54699 –

-2

我剛剛發現，你可以動畫：後和：（前：

典例 -

.model-item { 
    position: relative; 

    &:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     right: 0; 
     background: transparent; 
     transition: all .3s; 
    } 
    } 

    .opc { 
    &:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     right: 0; 
     background: rgba(0, 51, 92, .75); 
    } 
    }

我有DIV .MODEL項目，我需要他的動畫：後所以我增加了一個類變化的背景和我加入過渡代碼爲主：之後（動畫之前）

來源

2017-01-30 13:34:42

與Chrome也是如此 –

在僞類之前/之前爲CSS轉換屬性設置動畫效果

回答

相關問題