Question

我有一个按钮，当用户点击按钮时，我使用伪内容:before在按钮上添加“勾号”标记，它可以正常工作。

但是我需要用:before将fadeOut()属性删除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);
}

有什么建议吗？

Answer 1

由于您在点击时添加了right类，因此您可以为按钮创建一个空的:before伪元素并使用过渡

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

并将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/

（我只添加了转换的标准属性，如果需要，您应该添加供应商特定的前缀.. ）

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

1 个答案: