Because the project needs to achieve a picture of the revolving effect. View most of the general VUE component library, relatively see this kind of component, on their own manual implementation based on CSS3 animation revolving lamp effect. Two solutions immediately came to mind. One was to use timer, scrollLeft or modify the left attribute value in positioning position, and the other was to use CSS3’s Transform and animation.

Animation is chosen for implementation. Since js animation runs on CPU and CSS3 animation runs on GPU, CSS3 rendering cost is low, so WE finally decide to use CSS3 to implement such operations.

Using scrollLeft

ScrollLeft +overflow was originally used to implement the effect, and the timer was used to trigger it, which then caused redraw and overflow every time. (ps: If you need to improve performance, you can use requestAnimationFrame instead of timer firing. The main advantage is that requestAnimationFrame brings together all DOM operations in each frame in a single redraw or reflow. And the redraw or reflow interval closely tracks the browser’s refresh rate, which is typically 60 frames per second.)

(Change scrollLeft and left effect is the same)

function toScrollLeft(){
  // If the container width is greater than the scrollbar distance, repeat the scroll
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()'.18);
  }
  else{
    // Start from the beginning
    box.scrollLeft=0;
    setTimeout('toScrollLeft()'.18); }}Copy the code

---

Use cSS3 Animation Transform

Css3 animation is used to implement the rotating light, CSS variables are used to dynamically set the translateX offset of each state transform, and the most critical animation is used to achieve partial effects of the following GIF.

1. Set up the INITIAL HTML layout by setting up a div container

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img width="90px" height="90px" :src="src" />
        </li>
    </ul>
</div>
Copy the code

2. Set the style

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}
Copy the code

3. Finally, set the binding object to the style. CSS variables are mainly used in the style of the. Box element, and then dynamically set the effect of each state of the animation through specific values. Animation: Cap. length*8+’s Move Infinite Linear; The effect of infinite repetitions will appear.

Ps: This is the overall main operation point, other details are omitted

<div class="box" :style="{ '--card-ul-width-start':-30+'px', '--card-ul-width-middle1':-cap.length*30+'px', '--card-ul-width-middle2':-cap.length*60+'px', '--card-ul-width-end':-cap.length*90+'px' }">
    <ul :style="{'-webkit-animation':cap.length*8+ 's move infinite linear; '}">
        <li></li>
    </ul>
</div>
Copy the code

data(){
    cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')}Copy the code

@keyframes move {
    0%{
    transform:translateX(var(--card-ul-width-start))
    }
    30%{
    transform:translateX(var(--card-ul-width-middle1))
    }
    70%{
    transform:translateX(var(--card-ul-width-middle2))
    }
    100%{
    transform:translateX(var(--card-ul-width-end))
    }    
}
Copy the code