Question

最近，我正在尝试建立一个电竞网站，但到了我被困的时候，我已经到了一个地步。

我正在尝试制作一个像这样的进度条：https://nexus.leagueoflegends.com/en-us/esports/（!!!!查看右边的新闻框）。

当我从左侧悬停大新闻图片时以及当我从图片中拿起鼠标继续“前进”时，如何使进度条停止？

我知道我的解释很糟糕，所以请看一下我粘贴的链接以了解我的意思。

Answer 1

有一些方法可以做到这一点。最简单的方法可能是将animation-play-state属性与animationend事件一起使用。这涉及到使用css关键帧和一点JavaScript，但这确实非常简单。这就是我的做法。

const fetured = document.querySelector('.fetured')
const thumbnails = document.querySelectorAll('.thumbnail')


/**
 * Here we setup all of our callbacks. Each element
 * provides an 'animationend' event which we use
 * here to know when to switch the animation.
 */
for (const [i, element] of thumbnails.entries()) {
  element.addEventListener('animationend', () => {
    element.classList.remove('progress')
    thumbnails[(i + 1) % 3].classList.add('progress')
  })
}

/**
 * This is the basic styling for the news
 * container.
 */
.news {
  padding: 10px;
  margin: 0;
  
  width: 100%;
  height: 100%;
  
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1.0);
  color: rgba(0, 0, 0, 1.0);
}


/**
 * This class controls the display of the
 * "fetured" item.
 */
.fetured {
  padding: 0;
  margin: 0;
  
  width: calc(50% - 20px);
  height: calc(100% - 20px);
}


/**
 * This controls the display of the
 * thumbnails container.
 */
.thumbnails {
  padding: 0;
  margin: 0;
  
  width: calc(50% - 20px);
  height: calc(100% - 20px);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


/**
 * This class controls the display of
 * the "thumbnails"
 */
.thumbnail {
  padding: 0;
  margin: 0;
  
  width: 100%;
  height: 32%;
  
  display: flex;
}


/**
 * This class controls the display of
 * of the progress bar.
 */
.progress::after {
  content: '';
  display: block;
  background: black;
  
  width: 0;
  height: 5px;
  
  animation-name: progress-bar;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-play-state: running;
}


/**
 * This part is important, this set of rules
 * basicly says: "When .fetured is hovered,
 * pause the progress bar"
 */
.fetured:hover ~ .thumbnails .progress::after {
  animation-play-state: paused;
}


/**
 * Color convience classes
 */
.red { background: red; }
.green { background: green; }
.blue { background: blue; }


/**
 * This describes the progress bar using css
 * keyframes.  We use keyframes because this
 * will make the animation easy to pause by
 * using the `animation-play-state` property.
 */
@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}


/**
 * This resets the base styles on the html and
 * body elements, but is not an important part
 * of the solution.
 */
html, body {
  padding: 0;
  margin: 0;
  
  width: 100%;
  height: 100%;
}

<div class="news">
  <div class="fetured red">
    <!-- Add your fetured slide here --> 
  </div>
  
  <div class="thumbnails">
    <div class="thumbnail red progress"></div>
    <div class="thumbnail green"></div>
    <div class="thumbnail blue"></div>
  </div>
</div>

如您所见，将鼠标悬停在较大的红色块上会使进度条动画暂停。只能通过缩略图列表翻转使用JavaScript。

新闻框的进度栏

1 个答案: