Javascript - how to trigger a "if" condition by a change through CSS

Question

I'm being tormented in the past 4 hours to find out how to do this, I don't know what I'm doing wrong, I have a page with multiple layers, I wish to trigger some transition when the needed page has opacity 1, it should be simple when u think of it, here is my code, please help ;)

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>

here is the code which i use to change the opacity using the wheel :

//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

You can use the transitionend event, but you'd have to set up the transition first. As it sits now, there's not much information in your question about the different slides, how the transitions are set up, etc. Here's a baseline to give you an idea:

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>

Edit

It'll need some love but I think it's in the right direction to what you're after.

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>