仿淘宝APP 2017双11滑动效果

HTML代码：

<div class="swiper">
    <ul>
        <li>
            <div class="box">1</div>
        </li>
        <!-- 共10个li -->
    </ul>
</div>

JS代码：

var items = document.querySelectorAll('li'), itemSize = items.length, isOdd = true;
var swiper = document.querySelector('.swiper'),
    ul = swiper.querySelector('ul'),
    swipeIndex = 0,
    isTouch = false,
    touchstartX;
swiper.addEventListener('touchstart', function (e) {
    touchstartX = e.touches[0].pageX;
    isTouch = true;
}, false);
document.addEventListener('touchmove', function (e) {
    isTouch && e.preventDefault();
}, false);
document.addEventListener('touchend', function (e) {
    if (isTouch) {
        var touchendX = e.changedTouches[0].pageX;
        isOdd = !isOdd;
        touchendX < touchstartX ? goNext() : goPrev();
    }
    isTouch = false;
}, false);
function setBubble () {
    items.forEach(function (el, i) {
        if (isOdd) {
            if (i%4 === 0 || (i-3)%4 === 0) {
                el.classList.add('small');
            } else {
                el.classList.remove('small');
            }
        } else {
            if ((i-1)%4 === 0 || (i-2)%4 === 0) {
                el.classList.add('small');
            } else {
                el.classList.remove('small');
            }
        }
    });
}
function goNext () {
    if (swipeIndex++ >= itemSize / 6) {
        swipeIndex = itemSize / 6;
    } else {
        ul.classList.remove('nomore');
        go();
    }
}
function goPrev () {
    if (swipeIndex-- <= 0) {
        swipeIndex = 0;
        ul.classList.add('nomore');
        ul.addEventListener('webkitAnimationEnd', function () {
            this.classList.remove('nomore');
        });
    } else {
        go();
    }
}
function go () {
    ul.style.cssText = 'transform: translateX(-'+ swipeIndex * 100 +'px)';
    setBubble();
}
setBubble();

LESS代码：

.swiper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        height: 200px;
        transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &.nomore {
            animation: nomore .8s forwards linear;
        }
    }
    li {
        width: 100px;
        height: 100px;
        transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &.small {
            transform: scale(.7);
        }
        .box {
            height: 100px;
            background-color: #eeeeee;
            border-radius: 20px;
            animation: float 5s infinite linear;
            text-align: center;
            line-height: 170px;
            overflow: hidden;
            color: #fff;
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 30px;
                left: 0;
                bottom: 0;
                background: linear-gradient(-45deg, #d89e00, #e44474);
                border-radius: 0 0 20px 20px;
                z-index: -1;
            }
        }
        &:nth-of-type(3n - 1), &:nth-of-type(3n + 1) {
            .box {
                animation-delay: 2s;
            }
        }
    }
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
}
@keyframes nomore {
    20% {
        transform: translateX(20px);
    }
    50% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(0);
    }
}