foreword

Seamless carousel has always been a popular question in interviews, and most of the answers are to copy the first to the last. It is true that this method is very standard, so is there an alternative method?

The first method is to place all the pictures one by one, and then move them slowly,

But can I just move hard without swinging?

If you have used vue's transition, we can simulate this movement by adding entry and exit animations to each image

• The entry animation is from the far right to the center of the screen
• The exit animation is to move out from the center of the screen to the left

The effect that looks like this is that the picture moves from the right to the left, but the difference is that each of our elements has this entry animation and exit animation, we don't need to care which element it is, you just need to Carousel is.

What if you don't use vue?

It's very simple, we can realize the effect of a transition by ourselves. The main thing is the following two points

• When the element is displayed, that is, when the display property is not none, add the xx-enter-active animation
• When the element disappears, add the animation xx-leave-active first, pay attention to let the animation disappear before it finishes playing

 function hide(el){
     el.className = el.className.replace(' slide-enter-active','')
     el.className += ' slide-leave-active'
     el.addEventListener('animationend',animationEvent)
 }
 function animationEvent(e){
     e.target.className = e.target.className.replace(' slide-leave-active','')
     e.target.style.display = 'none'
    e.target.removeEventListener('animationend',animationEvent)
 }
 function show(el){
     el.style.display = 'flex'
     el.className += ' slide-enter-active'
 }

Here we use animationend to monitor the end of the animation. Note that every time you add a new class, you need to re-add the listener, otherwise it will not be able to monitor. If you don't use this method you can use a timer to remove the leave-active class.

 function hide(el){
     el.className = el.className.replace(' slide-enter-active','')
     el.className += ' slide-leave-active'
     setTimeout(()=>{
         //Clear the class after the animation ends
         el.className = el.className.replace(' slide-leave-active','')
         el.style.display = 'none'
     }, ANIMATION_TIME) //This ANIMATION_TIME is the time when you animate in css
 }

So, how to write animation?

 .slide-enter-active{
     position: absolute;
     animation: slideIn ease .5s forwards;
 }
 .slide-leave-active{
     position: absolute;
     animation: slideOut ease .5s forwards;
 }
  
 @keyframes slideIn {
     0%{
        transform: translateX(100%);
     }
     100%{
        transform: translateX(0);
     }
 }
 @keyframes slideOut {
     0%{
        transform: translateX(0);
     }
     100%{
        transform: translateX(-100%);
     }
 }

You should pay attention to the forward attribute here. This attribute indicates that the state of your element will remain the state after the animation. If it is not set, your element will return to the central position after the animation is completed At this time, you will ask, the above code is not written, and the element is hidden after the animation is executed?

If you use the above setTimeout to command the element to disappear after executing the animation, there may be a momentary flicker, because in actual business, your code may be more complicated, and setTimeout cannot be executed in such a precise time. To be on the safe side, let the element stay in the last state of the animation leaving, which is translateX(-100%). At this point the element is already off-screen, don't care about its performance

How to write carousel logic?

It's very simple. When we enter a new element, we can remove the old element at the same time, and both perform the entry and exit animations at the same time.

 function autoPlay(){
     setTimeout(()=>{
         toggleShow(new element, old element)
         this.autoPlay()
     },DURATION) //DURATION is the animation interval time
 }
 function toggleShow(newE,oldE){
     //The old ele and the new ele are animated at the same time
     hide(oldE)
     show(newE)
 }

thanks for reading

The blogger is here to give you an app for sharing learning materials. The main purpose of this app is to collect various learning materials on the Internet to integrate and share them for free. It covers Android, java, python, data structure, algorithm, front-end, crawler, big data, deep learning, UI and other technologies, including M course network courses, a certain classroom VIP course, courses of various training institutions, and some payment for a certain fish Courses and algorithm interview materials are constantly being updated. Almost all the learning materials you want are available. Of course, you can also join our technical Q group to obtain various materials: 687667883. For any course questions, you can directly consult the group owner.
The currently connected course forums are as follows, you can learn about the courses in advance:
The link resources are as follows (all the courses in the forum below are available in the app and are free. If there is no entry, add the above Q group to find the group owner):
    Enjoy Learning app Resource Docking Forum 1 (issued on IT code)
    Enjoy Learning app Resources Docking Forum II (Worry-free learning journey)

At present, the app has been put on the Xiaomi App Market, you can search for "Enjoy Learning" to download it. Other markets are being launched simultaneously. At the same time, you can also scan the following QR code to download: