我正在尝试使用Enter-view https://github.com/russellgoldenberg/enter-view/blob/master/README.md创建视频解释器。当我进入一个部分时，将添加“输入”类。当我离开该部分时，我希望删除该类，但它并非一直都在工作。如果我向下滚动，则该类将添加到每个元素，但不会从其他元素中删除。当我向上滚动到该元素之外时，该类将从兄弟元素中正确删除。
我的目标是使剖面元素随着另一个元素的淡入淡出。
body {
background-color: #c6d7de;
font-family: 'Montserrat';
margin: 0;
}
#v0 {
position: fixed;
bottom: 0;
right: 0;
width: 70%;
}
#set-height {
display: block;
}
section {
z-index: 1;
position: relative;
}
.content {
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 50vh;
top: 0;
}
.home-slide-1 {
height: 100vh;
/* background: blue; */
}
.scroll-snapping-box {
scroll-snap-type: y mandatory;
}
.scroll-snapping-box section {
scroll-snap-align: start;
}
h1 {
font-size: 3em;
background: #fff;
display: inline-block;
padding: 10px 15px;
border-radius: 5px;
margin: 0;
}
p { font-size: 1.5em; }
section:nth-of-type(1) {
height: 100vh;
}
section:nth-of-type(2) {
height: 100vh;
}
section:nth-of-type(3) {
height: 100vh;
}
.entered {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="scroll-snapping-box">
<section class="container home-section-1">
<div class="content">
<div class="home-slide-1">
<h1>Section 1</h1>
<p>Small info...</p>
</div>
</div>
</section>
<section class="container home-section-2">
<div class="content">
<div class="home-slide-2">
<h1>Section 2</h1>
<p>Small info...</p>
</div>
</div>
</section>
<section class="container home-section-3">
<div class="content">
<div class="home-slide-3">
<h1>Section 3</h1>
<p>Small info...</p>
</div>
</div>
</section>
</div>
<!-- <div id="set-height"></div> -->
<video id="v0" tabindex="0", autobuffer preload>
<source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="fingers.mp4"></source>
</video>
<script type="text/javascript">
"use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});
</script>
<script type="text/javascript">
enterView({
selector: '.home-section-1',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
},
})
enterView({
selector: '.home-section-2',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
}
})
enterView({
selector: '.home-section-3',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
}
})
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 750,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
</script>
</body>
</html>