Hello, everyone, I am Yin Dong, today with native JS to write you a page-turning effect.

First complete the static layout of the page.

HTML is very simple, just a UL tag and a button button. Li in UL is dynamically generated through JS.

<body>
	<ul id="ul"></ul>
	<button>switch</button>
</body>
Copy the code

Js gets the UL element and button in the page first. An ARR array is then created to store the location information for each LI element.

window.onload = function () {
    const oUl = document.getElementById('ul');
    const button = document.querySelector('button');
    // Store motion element location information
    let arr = [];
}
Copy the code

Create a start function to start writing the animation, first calling a start in the event that binds start to button.

start();
button.onclick = start;
Copy the code

If no ul content is empty, no LI is generated using the for loop. After generating, the location information of each LI is stored in an array, and finally modified with absolute location. With absolute positioning li can animate.

const aLi = oUl.getElementsByTagName('li');
const num = 10;
// The number of elements involved in the movement, with subscripts starting at 0
let iNow = num - 1;
// If there is no Li
if(! oUl.innerHTML) {// create num li in ul
    for (let i = 0; i < num; i++) {
        let oLi = document.createElement('li');
        oUl.appendChild(oLi);
    }
    // Store the location of each LI in arR
    for (let i = 0; i < aLi.length; i++) {
        arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
    }
    // Loop to add positions for each li, using positions to fix positions
    for (let i = 0; i < aLi.length; i++) {
        aLi[i].style.position = 'absolute';
        aLi[i].style.left = arr[i][0] + 'px';
        aLi[i].style.top = arr[i][1] + 'px';
        aLi[i].style.margin = 0; }}Copy the code

If li exists, animation is used to delete the current LI and create a batch of new Li.

First, set a timer to run every 100ms, so that each LI will start moving 100ms apart. The movement uses the previously defined move movement function, which was encapsulated in previous articles and won’t be covered here. Finally, subtract 1 from iNow, which is the element being moved.

When iNow equals 0, all elements are finished. Clear this timer. Then turn on another timer to execute a run.

The first movement is removal, and the second movement is migration.

if(! oUl.innerHTML) { ... }else {
    // move if li is present
    let timer = setInterval(function () {
        // Call move
        move(aLi[iNow], { left: 200.top: 250.opacity: 0 });
        // iNow is a moving li. It moves every 100 ms. When it is 0, the movement completes
        if (iNow == 0) {
            clearInterval(timer);
            / / reset iNow
            iNow = num - 1;
            let timer2 = setInterval(function () {
                / / li
                move(aLi[iNow], { left: arr[iNow][0].top: arr[iNow][1].opacity: 100 });
                // The recovery is complete
                if (iNow == 0) {
                    clearInterval(timer2);
                    iNow = num - 1;
                } else{ iNow--; }},100);
        } else{ iNow--; }},100);
}
Copy the code

That’s what it looks like when it’s finished.

Source code self address: self link: github.com/xiaoyindong…