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>