Javascript - как вызвать условие «если» при изменении через CSS

Question

В последние 4 часа я мучаюсь, чтобы узнать, как это сделать, я не знаю, что я делаю неправильно, у меня есть страница с несколькими слоями, я хочу вызвать какой-то переход, когда необходимостраница имеет непрозрачность 1, это должно быть просто, если подумать, вот мой код, пожалуйста, помогите;)

slide1 = document.querySelector('.slide1');

function videoPlay() {
    var videoOne = document.getElementById('myVideo');
    if ((slide1.style.opacity) > 0 ) {
        videoOne.play();
    }
}
videoPlay();

.slide {
    width: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
}
.slide1 {
    width: 100%;    
    background: none;
    opacity: 0;
}

<div class="slide slide1">
  <div class="slide-content">
    <div class="secondColumn">
      <video muted id="myVideo">
        <source src="Media/Acqua.mp4" type="video/mp4">
      </video>
    <div class="lowerTab"></div>
  </div>
</div>

Вот код, который я использую для изменения непрозрачности с помощью колеса:

//wheel event
    document.addEventListener('wheel',
function scrollWheel(event) {
var fig =event.deltaY;
if (fig > 0) {
    slideMove();
}
else if (fig<0) {
    slideMovReverse();
} 
})

//basic movement
 function slideMove() {
if (current === sliderImages.length-1 ) {
    current = -1
}
reset();
sliderImages[current+1].style.transition = "opacity 1s ease-in 0s";
sliderImages[current+1].style.opacity= "1.0"; 
current++;
} 

Answer 1

Вы можете использовать событие transitionend, но сначала вам нужно будет настроить переход.На данный момент в вашем вопросе не так много информации о различных слайдах, о настройке переходов и т. Д. Вот базовая линия, чтобы дать вам представление:

const slide1 = document.querySelector('.slide1');
const videoEl = document.querySelector('.slide1__video');
const button = document.querySelector('button');

let inView = false;

slide1.addEventListener('transitionend', () => {
  let content = 'Playing';
  if (inView) {
    content = ''
  }
  videoEl.textContent = content;
  inView = !inView;
})

button.addEventListener('click', () => {
  slide1.classList.toggle('active')
})

.slide1 {
  transition: opacity 500ms linear;
  opacity: 0;
  border: 1px solid green;
  padding: 10px;
  margin-bottom: 24px
}

.slide1.active {
  opacity: 1
}

<div class="slide1">
  Slide 1
  <div class="slide1__video"></div>
</div>
<button>Next</button>

Редактировать

Потребуется немного любви, но я думаю, что это в правильном направлении к тому, что вы ищете.

const slides = Array.from(document.querySelectorAll('.slide'));

document.addEventListener('wheel', onScroll);

const SCROLL_TOLERANCE = 100;

let currentIndex = 0;
let currentScroll = 0;

function onScroll(e) {
  if (e.deltaY > 0) {
    currentScroll += 1;
  } else {
    currentScroll -= 1;
  }

  if (currentScroll >= (currentIndex * SCROLL_TOLERANCE) + 15) {
    showNext();
  } else if (currentScroll <= (currentIndex * SCROLL_TOLERANCE) - 15) {
    showPrevious();
  }
}

function showNext() {
  if (currentIndex === slides.length - 1) {
    return console.warn('At the end.');
  }
  currentIndex += 1;
  setSlide();
}

function showPrevious() {
  if (currentIndex === 0) {
    return console.warn('At the beginning.');
  }
  currentIndex -= 1;
  setSlide();
}

function setSlide() {
  let newOpacity = 0;
  slides.forEach(slide => {
    if (+slide.dataset.index === currentIndex) {
      newOpacity = 1
    } else {
      newOpacity = 0;
    }
    slide.style.opacity = newOpacity;
    slide.addEventListener('transitionend', () => {
      console.log('Done transitioning!');
      // Do things here when the transition is over.
    })
  });
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 18px
}

.slide {
  border: 3px solid #efefef;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 500ms linear;
  opacity: 0;
  transition-delay: 250ms;
}

.slide.active {
  opacity: 1;
}

<div class="slide active" data-index="0">
  Slide 1
</div>
<div class="slide" data-index="1">
  Slide 2
</div>
<div class="slide" data-index="2">
  Slide 3
</div>
<div class="slide" data-index="3">
  Slide 4
</div>