Можно ли анимировать и удалить псевдо-контент из элемента.?

У меня есть кнопка, когда пользователь нажимает на кнопку, добавляю отметку «галочку» на кнопке, используя псевдо-контент :before, он отлично работает.Можно ли анимировать и удалить псевдо-контент из элемента.?

Но мне нужно удалить это имущество :before по fadeOut() с 2sec. можно ли это сделать?

вот мой код кнопки 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 класс на клик, вы можете создать пустой :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; 
}

Demo вhttp://jsfiddle.net/SYQ89/

(при необходимости я только добавил стандартное свойство для переходов, следует добавить специфические для каждого поставщика префиксов ..)

источник

2013-10-07 12:48:23

Можно ли анимировать и удалить псевдо-контент из элемента.?

ответ

Смежные вопросы