Javascript - 如何通过 CSS 更改触发 "if"条件

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>