5

我们如何使用 scroll-snap CSS API 控制动画的速度？

在这个例子中：https ://codepen.io/newinweb/pen/EpPgdR

function toggleSnap() {
  var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
  document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
}

function toggleDirection() {
  var isVertical = document.getElementById('carousel').classList.toggle('vertical');
  document.getElementById('otherScrollState').innerText = isVertical ? 'horizontal' : 'vertical';
}
#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap > div {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}


/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#carousel > div {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel-1 {
  background-color: #e34747;
}

#carousel-2 {
  background-color: #5ab92c;
}

#carousel-3 {
  background-color: #226de2;
}

#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}
<div id="carousel" class="snap">
  <div id="carousel-1">Item 1<br>Start scrolling ...</div>
  <div id="carousel-2">Item 2</div>
  <div id="carousel-3">Item 3</div>
</div>

<div id="controls">
  <button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
  <button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
</div>

它工作正常，但想象一下我希望两个元素之间的过渡（滚动动作）具有特定的持续时间（例如 5 秒）

我们怎么能这样做？如果可能的话，同样的问题是控制延迟（比如动画 CSS）

4

0 回答 0