Анимировать свойство CSS-перехода в псевдоклассах: after /: before - PullRequest
Новая
       35

Анимировать свойство CSS-перехода в псевдоклассах: after /: before

29 голосов
/ 18 октября 2011

Можно ли анимировать псевдоклассы CSS?

Скажите, что у меня есть: 

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

Возможно ли это вообще?Я тестировал и пока не могу найти решение.Я пытаюсь сократить количество необходимой поддержки JavaScript с помощью Modernizr.

У меня уже есть метод JavaScript, поэтому, пожалуйста, не используйте альтернативы JavaScript.

Демо : http://jsfiddle.net/MxTvw/

Ответы [ 4 ]

12 голосов
/ 20 октября 2012

Google Chrome добавил исправление ошибки веб-набора в версию 27.0.1453.110 m

Эта ошибка исправлена: http://trac.webkit.org/changeset/138632

ЭТО ВОЗМОЖНО для анимации псевдо :before и :after, вот пара примеров для анимации псевдоэлементов :before и :after.

Вот модификация вашего примера выше с некоторыми правками, что делает анимацию более плавной, без смоделированной mouseleave / mouseout задержки при наведении:

http://jsfiddle.net/MxTvw/234/

Попробуйте добавить главный селектор #fooс сгруппированным псевдоклассом :hover во втором :hover правиле псевдокласса.Также добавьте свойство transition, а не только префиксные свойства, специфичные для поставщика, для transition: 

#foo:after{
   display: block;
   content: '';
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
} 

#foo,
#foo:hover:after,
#foo:hover:before{
   width: 250px;
   height: 250px;
}

Обратите внимание, что для продвижения вперед любые псевдоэлементы, такие как :before и :after, должны использовать двойное двоеточиесинтаксис ::before и ::after.Этот пример имитирует появление и исчезновение с использованием наложения background-color и background-image при наведении:

http://jsfiddle.net/MxTvw/233/

В этом примере имитируется анимация вращения при наведении:

http://jsfiddle.net/Jm54S/28/

Конечно, для продвижения вперед со стандартами css3 мы могли бы использовать ::before и ::after.

Это работает в последних версиях Firefox, Chrome, Safari, Opera18+, IE10, IE11 (IE9 и ниже не поддерживают переходы css3 или анимацию.)

11 голосов
/ 18 октября 2011

Твоя скрипка у меня работает в Firefox.И насколько я знаю, и если эта статья актуальна, то это единственный браузер, который может анимировать псевдоэлементы.С 2016 года ссылка на статью не работает, и соответствующая ошибка WebKit была исправлена ​​ 4 года назад .Читайте дальше, чтобы увидеть другие ответы, этот устарел.

0 голосов
/ 30 января 2017

Я только что узнал, что вы можете анимировать: after и: before (:

Пример кода - 

  .model-item {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: transparent;
      transition: all .3s;
    }
  }

  .opc {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: rgba(0, 51, 92, .75);
    }
  }

У меня есть div .model-item, и мне нужно было оживить его: after. Поэтому я добавил еще один класс, который меняет фон, и добавил код перехода к основному: after (перед анимацией)

0 голосов
/ 18 октября 2011

Это , похоже, не работает сейчас, однако в соответствии со спецификациями W3 вы можете применять переходы к псевдоэлементам.Может быть, когда-нибудь в будущем ...

...