是否可以动画和从元素中删除伪内容..？

我有一个按钮，当用户点击按钮时，我使用伪内容: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

是否可以动画和从元素中删除伪内容..？

回答

相关问题