Переходы CSS3 для псевдоэлементов (: after, : before) не работают?

Я показываю атрибут title ссылки на :hover. Атрибут title добавляется к ссылке через :after…

Теперь мне интересно, как я могу анимировать непрозрачность псевдоэлемента :after при наведении и наведении.

html

<a class="link" href="#" title="something"></a>​

CSS

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

Посмотрите демонстрацию: http://jsfiddle.net/d2KrC/.

Любые идеи, почему это не работает? ​


css css-transitions pseudo-element
person matt    schedule 14.05.2012    source источник
comment
:before и :after — псевдоэлементы, :hover — псевдокласс. Это два разных понятия, которые не следует путать друг с другом.   -  person BoltClock    schedule 21.06.2012
comment
Это задокументированная ошибка в webkit. Проверьте мой ответ ниже, чтобы узнать, как исправить хак, а также отчет об ошибке, чтобы оставаться в курсе его статуса.   -  person DMTintner    schedule 17.09.2013
comment
Нет необходимости в -ms-transition. Это свойство никогда не существовало.   -  person ReactingToAngularVues    schedule 20.11.2014

Ответы (2)


arrow_upward
10
arrow_downward

WebKit (Chrome, Safari) не поддерживает переходы по псевдоэлементам.

Это должно работать в Firefox.

Изменить: проблема в WebKit теперь решена. Патч уже появился в Chrome Carnery, поэтому он будет поддерживаться начиная с версии 26. Я не знаю о сафари.

person Jona    schedule 14.05.2012
comment
прошло 2 года. Я бы не стал задерживать дыхание. - person chovy; 04.11.2012
comment
Анимация, кажется, не работает для iphone/ipad IOS 8, есть идеи? - person webkit; 04.02.2015
comment
все еще не работает в браузере сафари для переходов по псевдоэлементам - person dhana; 29.07.2019

arrow_upward
5
arrow_downward

Существует довольно простой обходной путь для этой ошибки webkit, чтобы заставить переходы работать с псевдоклассами. Вот отличный пост об этом в блоге: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

В основном webkit не поддерживает переходы напрямую, но вы можете применить переход и стиль, которые хотите изменить, к его родительскому элементу. Затем в псевдоклассе вы помещаете те же самые свойства стиля, на которые хотите воздействовать, но присваиваете им значение: наследовать. Это заставит их наследовать все значения родительских элементов, включая переход.

Вот пример, который я сделал для анимации элемента :after вверх и вниз.

a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */
    top: 1px; /*doesnt move it because it is position static */
    -webkit-transition: top 200ms ease 0;
}
a:after {
    content: '';
    position: absolute;
    top: inherit;
}
a:hover {
    top: 3px;
}

*Обновление. Ошибка была исправлена ​​в Chrome Canary (по состоянию на февраль), но по-прежнему не работает в Safari. Вы можете проверить статус и быть в курсе здесь: https://code.google.com/p/chromium/issues/detail?id=54699

person DMTintner    schedule 16.12.2012