Как исчезать и исчезать CSS": после " псевдо-элемента при добавлении или удалении класса

Я знаю, что есть много других вопросов об использовании переходов на псевдо-элементе CSS, но после прохождения через целую кучу из них я все еще не могу заставить свой сценарий работать.

В основном, я хочу добавить класс к элементу, класс имеет: после псевдо-элемента с некоторым содержанием и фоном. Я бы хотел, чтобы эффект затухания на элементе: after при добавлении или удалении класса.

Я пробовал это в этом jsfiddle и код, который у меня есть пока это так:

HTML-код

<div id="divA">Div test</div>
<button id="btnAdd">Add it</button>
<button id="btnRemove">Take Away</button>

в CSS

div {
    width: 200px;
    transition: all .5s linear;
    background: red;
}

.test{
     background: blue;
}

.test:after{    
    background: #0c0;
    content: "Test";
}

jQuery

$("#btnAdd").click(function() {
  $("#divA").addClass("test");
});

$("#btnRemove").click(function() {
  $("#divA").removeClass("test");
});

любая помощь и подсказки будут очень признательны.

9
css css-transitions css3

3 ответов

Forking @NilsKaspersson ответ, чтобы заставить его работать с вашими требованиями.

переход означает от X к Y, вы не можете ожидать, что он будет работать с вновь созданными атрибутами.

затем вам нужно создать начальный атрибут и изменить его позже.

Так как вы не хотите, чтобы он был там в начале, просто используйте color: transparent; и background: transparent;

Запуск Демо

код:

div {
    width      : 200px;
    transition : all .5s linear;
    background : red;
}

div:after {
    transition : all .5s linear;
    background : transparent;
    color      : transparent;
    content    : "Test";
}

.test{
    background : blue;
}

.test:after{
    background : #0c0;
    color      : black;
}
4

здесь происходит две вещи.

1.) transition работает только тогда, когда есть что-то для перехода С. С вашего :after элемент по существу создается, когда класс test добавляется к нему, нет никакого перехода.

2.) transition не наследуется, поэтому вам нужно будет объявить его еще раз на псевдо-элементе.

вот быстрая и грязная вилка вашего JSFiddle.

я переехал общие правила для псевдо-элемента для бесклассового div и добавил transition к нему. Тогда когда класс test добавляется к нему, фон изменяется, и он может переходить от старого значения.

если вы не хотите, чтобы псевдо элемент content чтобы быть видимым все время, подумайте о том, чтобы скрыть его с opactiy: 0 и переход к 1, или используйте transparent значение цвета для background и/или color.

1

Edit: изменение ответа на основе новой скрипки.

в большинстве случаев переход CSS должен применяться к уже определенным свойствам.

Additionnaly, изменение псевдо :after элемент content сделает элемент удаленным и повторно добавленным, что одновременно удаляет указанные свойства.

Я сделал демо с анимацией текста color и background-color при предварительной настройке content, поэтому свойства уже присутствуют.

CSS :

div {
    width: 200px;
    transition: all .5s linear;
    background: red;
}
div:after {
    transition: all .5s linear;
    background: red;
    color: red;
    content: 'Test';
}
.test{
    background: blue;
}
.test:after{
    background: #0c0;
    color: black;
}

Скрипка:http://jsfiddle.net/W5e9Q/10/

1