Как правильно обратиться к классу имеющий псевдоэллемент ::after в jquery?

Question

[Alex Ivanov]

Всем привет!
Как правильно обратиться к классу имеющий псевдоэллемент ::after в jquery?
В скрипте так понимаю не срабатывает обращение на .class::after
Написал небольшой скрипт с анимацией для прокрутки и вот вылезло, не хочет работать...

Можете подсказать как можно сделать?

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 2600) {
            effectFirst();
        }
        if ($(this).scrollTop() > 2600) {
            effectSecond();
        }
    });
});

function effectFirst() {
    $(".step__arrow::after").css('animation-play-state','running');
    $(".step__arrow::after").css("opacity", "1");
}
function effectSecond() {
    $(".step__image").css("animation-play-state", "running");
    $(".step__image").css("opacity", "1");
}

<div class="step step__arrow">
							<div class="step__image">
								<img src="src/img/step/step1.png" alt="">
							</div>
							<p class="step__text">Вы звоните нам или оставляете заявку</p>
						</div>

.step__arrow::after {
  -webkit-transform: 360deg;
      -ms-transform: 360deg;
          transform: 360deg;
  -webkit-animation-name: scrollAnimate;
          animation-name: scrollAnimate;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.step__image {
  -webkit-transform: 360deg;
      -ms-transform: 360deg;
          transform: 360deg;
  -webkit-animation-name: scrollAnimate;
          animation-name: scrollAnimate;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

Answer 1

[Алекс Глебов]

у js нет доступа к псевдоэлементам

$('.step__arrow').addClass('show');

.step__arrow.show::after {
//css анимация
}

Comments

[Alex Ivanov]

Спасибо!!!