新闻框的进度条

Question

Recently I am trying to make an esports website and I've got to a point when i am stuck.

I am trying to make a progress bar like this one : https://nexus.leagueoflegends.com/en-us/esports/ (!!!! Look at the news boxes from the right).

How can I make the progress bar to stop when I am hovering the big news picture from the left side and when I take the mouse from the picture to continue "progress"?

I know that I explained terribly bad so just look at the link that i pasted to understand what I mean.

Answer 1

There are quire a few ways to do this. The easiest way is probably going to involve using the animation-play-state property in conjunction with the animationend event. This involves using css key-frames and a touch of JavaScript, but it's really quite simple. Here's how I would do it.

 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>

As you can see, hovering over the larger red block causes the progress bar animation to pause. The JavaScript is only used flip though the thumbnail list.