单击下一个/上一个图像滑块/转盘运行不流畅？

Question

https://codepen.io/sub0-l3/pen/xjPwBP

我真的很喜欢这个滑块，但是想不出办法让您在移动滑块时能平稳地移动？ 当您单击箭头时，似乎有些帧将滑块向后推，然后再向前移动。 我想知道如何才能做到这一点呢？ 我一直在努力弄清楚，但没有运气。

谢谢！

.move-out-from-left {
    animation: moveOutLeft 0.5s ease-in-out;
}

.move-out-from-right {
    animation: moveOutRight 0.5s ease-in-out;
}

.move-to-position5-from-left {
    animation: moveToP5Left 0.5s ease-in-out;
}

.move-to-position4-from-left {
    animation: moveToP4Left 0.5s ease-in-out;
}

.move-to-position3-from-left {
    animation: moveToP3Left 0.5s ease-in-out;
}

.move-to-position2-from-left {
    animation: moveToP2Left 0.5s ease-in-out;
}


.move-to-position1-from-left{
    animation: moveToP1Left 0.5s ease-in-out;
}

.move-to-position5-from-right{
    animation: moveToP5Right 0.5s ease-in-out;
}
.move-to-position4-from-right{
    animation: moveToP4Right 0.5s ease-in-out;
}
.move-to-position3-from-right{
    animation: moveToP3Right 0.5s ease-in-out;
}
.move-to-position2-from-right{
    animation: moveToP2Right 0.5s ease-in-out;
}
.move-to-position1-from-right{
    animation: moveToP1Right 0.5s ease-in-out;
}

@keyframes moveOutLeft {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }
    50% {
        transform: scale(0.5) translateX(-150%);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}

@keyframes moveOutRight {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }
    50% {
        transform: scale(0.5) translateX(150%);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}


@keyframes moveToP5Left {
    from {
        transform: scale(0.75) translateX(100%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP4Left {
    from {
        transform: scale(0.75) translateX(100%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Left {
    from {
        transform: scale(0.85) translateX(100%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP2Left {
    from {
        transform: scale(1) translateX(100%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP1Left {
    from {
        transform: scale(0.85) translateX(100%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

Answer 1

尝试这个。 我摆脱了许多translationX，因为那是导致它像这样跳跃的原因，并且将缓入改成缓入

.move-out-from-left {
    animation: moveOutLeft 0.5s ease-in;
}    
.move-out-from-right {
    animation: moveOutRight 0.5s ease-in;
}    
.move-to-position5-from-left {
    animation: moveToP5Left 0.5s ease-in;
}    
.move-to-position4-from-left {
    animation: moveToP4Left 0.5s ease-in;
}    
.move-to-position3-from-left {
    animation: moveToP3Left 0.5s ease-in;
}    
.move-to-position2-from-left {
    animation: moveToP2Left 0.5s ease-in;
}    
.move-to-position1-from-left{
    animation: moveToP1Left 0.5s ease-in;
}   
.move-to-position5-from-right{
    animation: moveToP5Right 0.5s ease-in;
}
.move-to-position4-from-right{
    animation: moveToP4Right 0.5s ease-in;
}
.move-to-position3-from-right{
    animation: moveToP3Right 0.5s ease-in;
}
.move-to-position2-from-right{
    animation: moveToP2Right 0.5s ease-in;
}
.move-to-position1-from-right{
    animation: moveToP1Right 0.5s ease-in;
}

@keyframes moveOutLeft {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }    
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}

@keyframes moveOutRight {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }    
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}


@keyframes moveToP5Left {
    from {
        transform: scale(0.75) translateX(50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP4Left {
    from {
        transform: scale(0.75) translateX(50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Left {
    from {
        transform: scale(0.85) translateX(50%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP2Left {
    from {
        transform: scale(1) translateX(50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP1Left {
    from {
        transform: scale(0.85) translateX(50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}


@keyframes moveToP1Right {
    from {
        transform: scale(0.75) translateX(-50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP2Right {
    from {
        transform: scale(0.75) translateX(-50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Right {
    from {
        transform: scale(0.85) translateX(-50%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP4Right {
    from {
        transform: scale(1) translateX(-50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP5Right {
    from {
        transform: scale(0.85) translateX(-50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

您的主要问题是翻译过度。

 function shiftLeft() { const boxes = document.querySelectorAll(".box"); const tmpNode = boxes[0]; boxes[0].className = "box move-out-from-left"; setTimeout(function() { if (boxes.length > 5) { tmpNode.classList.add("box--hide"); boxes[5].className = "box move-to-position5-from-left"; } boxes[1].className = "box move-to-position1-from-left"; boxes[2].className = "box move-to-position2-from-left"; boxes[3].className = "box move-to-position3-from-left"; boxes[4].className = "box move-to-position4-from-left"; boxes[0].remove(); document.querySelector(".cards__container").appendChild(tmpNode); }, 500); } function shiftRight() { const boxes = document.querySelectorAll(".box"); boxes[4].className = "box move-out-from-right"; setTimeout(function() { const noOfCards = boxes.length; if (noOfCards > 4) { boxes[4].className = "box box--hide"; } const tmpNode = boxes[noOfCards - 1]; tmpNode.classList.remove("box--hide"); boxes[noOfCards - 1].remove(); let parentObj = document.querySelector(".cards__container"); parentObj.insertBefore(tmpNode, parentObj.firstChild); tmpNode.className = "box move-to-position1-from-right"; boxes[0].className = "box move-to-position2-from-right"; boxes[1].className = "box move-to-position3-from-right"; boxes[2].className = "box move-to-position4-from-right"; boxes[3].className = "box move-to-position5-from-right"; }, 500); } 

 html { font-size: 16px; } * { margin: 0px; padding: 0px; } body { font-family: "Lato", sans-serif; } .container { display: flex; justify-content: space-around; align-items: center; } .button { margin-left: 0 3%; width: 2rem; cursor: pointer; } .button--inactive { opacity: 0.2; } .button img { width: 60%; } .cards-wrapper { display: flex; flex-direction: column; align-items: center; } .cards__container { display: flex; align-items: center; justify-content: center; height: 25rem; } .box { /* margin: -1.5rem; */ width: 12rem; height: 20rem; box-shadow: 0px 0px 2rem 0px #888888; background-color: white; display: flex; justify-content: center; align-items: center; position: relative; /* transition: 1s all; */ } .box:nth-child(2n) { transform: scale(0.85); z-index: -1; } .box:nth-child(2) { left: 5%; } .box:nth-child(4) { left: -5%; } .box:nth-child(4n + 1) { transform: scale(0.75); z-index: -2; } .box:nth-child(1) { left: 15%; } .box:nth-child(5) { left: -15%; } .card__text-content { text-align: center; width: 75%; } .card__title { padding: 1rem; } .box--hide { display: none; } .move-out-from-left { animation: moveOutLeft 0.5s ease-in; } .move-out-from-right { animation: moveOutRight 0.5s ease-in; } .move-to-position5-from-left { animation: moveToP5Left 0.5s ease-in; } .move-to-position4-from-left { animation: moveToP4Left 0.5s ease-in; } .move-to-position3-from-left { animation: moveToP3Left 0.5s ease-in; } .move-to-position2-from-left { animation: moveToP2Left 0.5s ease-in; } .move-to-position1-from-left{ animation: moveToP1Left 0.5s ease-in; } .move-to-position5-from-right{ animation: moveToP5Right 0.5s ease-in; } .move-to-position4-from-right{ animation: moveToP4Right 0.5s ease-in; } .move-to-position3-from-right{ animation: moveToP3Right 0.5s ease-in; } .move-to-position2-from-right{ animation: moveToP2Right 0.5s ease-in; } .move-to-position1-from-right{ animation: moveToP1Right 0.5s ease-in; } @keyframes moveOutLeft { 0% { transform: scale(0.75) translateX(0%); opacity: 1; } 100% { transform: scale(0.25) translateX(0%); opacity: 0; } } @keyframes moveOutRight { 0% { transform: scale(0.75) translateX(0%); opacity: 1; } 100% { transform: scale(0.25) translateX(0%); opacity: 0; } } @keyframes moveToP5Left { from { transform: scale(0.75) translateX(50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP4Left { from { transform: scale(0.75) translateX(50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP3Left { from { transform: scale(0.85) translateX(50%); } to { transform: scale(1) translateX(0); } } @keyframes moveToP2Left { from { transform: scale(1) translateX(50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP1Left { from { transform: scale(0.85) translateX(50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP1Right { from { transform: scale(0.75) translateX(-50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP2Right { from { transform: scale(0.75) translateX(-50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP3Right { from { transform: scale(0.85) translateX(-50%); } to { transform: scale(1) translateX(0); } } @keyframes moveToP4Right { from { transform: scale(1) translateX(-50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP5Right { from { transform: scale(0.85) translateX(-50%); } to { transform: scale(0.75) translateX(0); } } 

 <head> <title>3d-carousal</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div> <div class="cards-wrapper"> <ul class="cards__container"> <li class="box" style="background-color:red">box 1</li> <li class="box">box 2</li> <li class="box">box 3</li> <li class="box">box 4</li> <li class="box">box 5</li> <li class="box box--hide">box 6</li> <li class="box box--hide">box 7</li> </ul> <div class="card__text-content"> <h3 class="card__title">The Famous Five</h3> <div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div> </div> </div> <div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div> </div> <script src='js/index.js'></script> </body> 

请注意，您需要展开完整的代码段才能看到箭头