1

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

但我需要在 2 秒内删除该:before属性fadeOut()。可以这样做吗？

这是我的按钮 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);
}

请问有什么建议吗？

4

1 回答 1

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/

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

于 2013-10-07T12:48:23.723 回答