我创建了一个动画,其中几张牌一张接一张地堆叠。目的是前面的牌在一定时间后消失,在后面重新出现,后面的牌来到前面,等等。问题是动画在两个地方有问题。
首先,只显示第一张牌的背景颜色(黄色),而不显示后面的牌。而且,看起来前面的卡片会穿过所有的卡片。如何解决这两个问题?这是我目前的代码。
window.onload = () => {
let sliderImagesBox = document.querySelectorAll('.cards-box');
sliderImagesBox.forEach(el => {
let imageNodes = el.querySelectorAll('.card:not(.hide)');
let arrIndexes = [];
(() => {
let start = 0;
while (imageNodes.length > start) {
arrIndexes.push(start++);
}
})();
let setIndex = (arr) => {
for (let i = 0; i < imageNodes.length; i++) {
imageNodes[i].dataset.slide = arr[i];
if (arr[i] === 0) {
imageNodes[i].classList.add('fade-out');
imageNodes[i].classList.remove('fade-in');
imageNodes[i].classList.add('color-' + arr[(i + 1) % imageNodes.length]); // Farbe ändern
} else {
imageNodes[i].classList.remove('fade-out', 'fade-in');
imageNodes[i].classList.remove('color-' + arr[i]); // Farbe entfernen
}
}
}
let rotateCards = () => {
arrIndexes.unshift(arrIndexes.pop());
setIndex(arrIndexes);
}
el.addEventListener('click', rotateCards);
setIndex(arrIndexes);
setInterval(rotateCards, 2000);
});
};
body {
background: #D6D3CE;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Helvetica;
}
.cards-box {
position: relative;
transform: translateX(-15px);
}
.cards-box .card {
width: calc(18rem + 19vh);
max-width: 80vw;
background: #f7fffd;
border-radius: 14px;
cursor: pointer;
opacity: 1;
transition: opacity 0.8s cubic-bezier(0.18, 0.98, 0.45, 1);
}
.cards-box .card.fade-out {
opacity: 0;
pointer-events: none;
/* verhindert Klick auf das ausblendende Element */
}
.cards-box .card:not(.hide) {
position: absolute;
top: 0;
left: 0;
transition: all 0.8s cubic-bezier(0.18, 0.98, 0.45, 1);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
}
.cards-box .card:not(.hide)[data-slide="0"] {
transform: translate(0px, 0px) scale(1);
z-index: 6;
opacity: 1;
background-color: #F6FF94;
}
.cards-box .card:not(.hide)[data-slide="1"] {
transform: translate(30px, -35px) scale(0.975);
z-index: 5;
background-color: #fff;
}
.cards-box .card:not(.hide)[data-slide="2"] {
transform: translate(60px, -65px) scale(0.95);
z-index: 4;
background-color: #B5B2A9;
}
.cards-box .card:not(.hide)[data-slide="3"] {
transform: translate(90px, -95px) scale(0.925);
z-index: 3;
background-color: #000000;
}
.cards-box .card:not(.hide)[data-slide="4"] {
transform: translate(120px, -120px) scale(0.9);
z-index: 2;
background-color: #F6FF94;
}
.cards-box .card:not(.hide)[data-slide="5"] {
transform: translate(85px, -85px) scale(0.875);
z-index: 1;
opacity: 0.5;
}
.cards-box .card:not(.hide)[data-slide="0"] {
transition: all 0.32s cubic-bezier(0.18, 0.98, 0.45, 1);
}
.content-placeholder {
padding: 14px 18px 20px;
}
.content-placeholder .row {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: calc(.8rem + 0.4vw);
}
.content-placeholder .row .img {
flex-shrink: 0;
position: relative;
margin-right: 20px;
background: #000;
width: calc(56px + 2vw);
height: calc(56px + 2vw);
border-radius: 50%;
}
.content-placeholder .row .img::after {
content: attr(data-letter);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: calc(30px + 1vw);
font-weight: bold;
color: white;
}
.content-placeholder .row .img-text {
background: #000;
width: 45%;
min-width: 145px;
height: 20px;
margin-top: -20px;
border-radius: 10px;
}
.content-placeholder .row .img-text::after {
content: "";
display: block;
width: 80%;
height: 10px;
margin-top: 30px;
background: #000;
border-radius: 10px;
}
.content-placeholder .text {
background: #000;
width: 90%;
height: 2vh;
min-height: 12px;
max-height: 14px;
border-radius: 10px;
}
.content-placeholder .text.text--m {
width: 80%;
margin-top: 2vh;
height: 2vh;
min-height: 12px;
}
.content-placeholder .text.text--s {
width: 70%;
margin-top: 2vh;
height: 2vh;
min-height: 12px;
}
<div class="cards-box">
<div class="card hide">
<div class="content-placeholder">
<div class="row">
<div class="img"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
<div class="card">
<div class="content-placeholder">
<div class="row">
<div class="img" data-letter="T"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
<div class="card">
<div class="content-placeholder">
<div class="row">
<div class="img" data-letter="M"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
<div class="card">
<div class="content-placeholder">
<div class="row">
<div class="img" data-letter="K"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
<div class="card">
<div class="content-placeholder">
<div class="row">
<div class="img" data-letter="G"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
<div class="card">
<div class="content-placeholder">
<div class="row">
<div class="img" data-letter="G"></div>
</div>
<div class="text text--l"></div>
<div class="text text--m"></div>
<div class="text text--s"></div>
</div>
</div>
</div>
1条答案
按热度按时间mpbci0fu1#
这可能不是答案,但它可以是一个想法,为什么你不先消失你的卡,然后删除它,然后再添加到您的堆栈,
比如当你的卡片正在显示时消失,设置它们的
max-width:100vh
(或任何你想要的最大高度)opacity:1
overflow:auto
transition:all .8s
(你设置transition
当你想要在它消失后再次显示它时,all
和time
值是任意的)并设置max-width:0
opacity:0
overflow:none
tarnsition:all .8s
,在这种情况下,当你想通过点击或滚动等动作来消失卡片时,它会消失,但它会在那里,因为我们将它的尺寸设置为0,所以现在在它消失后,你应该删除它,以避免将来出现任何问题,这可以通过
removeChild()
来完成。(最好将removeChild()
与setTimeOut()
一起使用,并将setTimeoutOut
的时间设置为比transition
的时间长一点(如.1s),因为当消失过程结束时,您的元素将被删除)在你删除你的元素之后,你可以用
createElement
再次创建它,并将它添加到你的堆栈中(我认为将卡片添加到堆栈的过程是由数组完成的)希望能帮到你。。我想用这种方法你的卡不能通过其他卡...