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);
}
}
答案 0 :(得分:0)
尝试一下。我摆脱了许多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>
请注意,您需要展开完整的代码段才能看到箭头