是否可以動畫和從元素中刪除僞內容..？

我有一個按鈕，當用戶點擊按鈕時，我使用僞內容:before在按鈕上添加了「打勾」標記，它工作正常。是否可以動畫和從元素中刪除僞內容..？

但我需要刪除:before財產由與2秒。有可能這樣做嗎？

這裏是我的按鈕的CSS代碼：

button{ 
    border: 1px solid #1f85c3; 
    height: 30px; 
    color: #fff; 
    padding: .4em 1em !important; 
    background-image: linear-gradient(#1f96d0, #007cc2); 
    position: relative; 
    display: block; 
    padding-right: 30px !important; 
}

上點擊我加入一個類名right：

button.right:before{ 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 0%; 
    margin: -7px 0 0 -10px; 
    height: 5px; 
    width: 16px; 
    border: solid #FFF; 
    border-width: 0 0 5px 5px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); 
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); 
}

有什麼建議嗎？

來源

2013-10-07 3gwebtrain

jQuery的不能訪問僞元素，所以不能用來做你需要的東西。 –

如果你使用的是jQuery，爲什麼不只是預先安排一個元素，然後動畫 – Pete

由於要添加上點擊right類，你可以創建按鈕和使用過渡

button:before{ 
    content:''; 
    opacity:1; 
    transition:opacity 2s linear; 
}

空:before僞元素，並添加opacity:0您button.right:before規則。

button.right:before{ 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 0%; 
    margin: -7px 0 0 -10px; 
    height: 5px; 
    width: 16px; 
    border: solid #FFF; 
    border-width: 0 0 5px 5px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); 
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); 

    opacity:0; 
}

在http://jsfiddle.net/SYQ89/

演示（如果需要的話，我只增加了轉換，你應該增加供應商特定的前綴的標準屬性..）

來源

2013-10-07 12:48:23

是否可以動畫和從元素中刪除僞內容..？

回答

相關問題