z-index 沒有按預期正常工作？
[英]z-index not working properly as expected?
問題描述
我正在嘗試制作一本書，點擊雙方即可翻轉。 當我點擊一個頁面時，我首先檢查方向，如果不是向右，則將其向左翻轉。 我也更改了 z-index 以保持順序。
我有個問題。 當我從左向右翻轉頁面時，z-index 已正確應用，但在屏幕上我看到幾秒鍾后應用了更改。 如果我控制台記錄 z-index，我會看到值得到正確更新。 我不知道我錯過了什么。 誰能告訴我？ 謝謝你。
const book = document.querySelector('.book'); book.addEventListener('click', e => { if (e.target.attributes['data-position'].value.== 'left') { e.target,setAttribute('data-position'; 'left'). e.target.classList;remove('flip-to-right'). e.target.classList;add('flip-to-left'). setTimeout(() => { console.log (e.target.attributes['data-position'];value). // e.target.style.zIndex = e.target.attributes['data-index'];value*(-1). e.target.style;zIndex = 1, }; 1000). } else { e.target.style.zIndex = e.target.attributes['data-index'];value. e.target.classList;remove('flip-to-left'). e.target.classList;add('flip-to-right'). e.target,setAttribute('data-position'; 'right'); } })
* { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: yellow; perspective: 1000px; }.book { display: flex; align-items: center; cursor: pointer; }.book:hover.cover{ /* transform: rotateX(10deg) rotateY(-180deg); */ }.book:hover.page{ /* transform: rotateX(10deg) rotateY(-180deg); */ /* z-index: 2; */ }.flip-to-left { transform: rotateX(10deg) rotateY(-180deg); }.flip-to-right { transform: rotateX(10deg) rotateY(0deg); }.cover { z-index: 7; /* transform: rotateX(10deg) rotateY(-180deg); */ transition: all 3s; }.page-1 { z-index: 5; }.page-2 { z-index: 4; }.page-3 { z-index: 3; }.page-4 { z-index: 2; }.last-page { z-index: 1; }.back-cover { z-index: 0; }.back-cover, .cover{ height: 300px; width: 260px; background-color: blue; border-radius: 10px; position: absolute; box-shadow: 1px 1px 10px gray; /* transform: rotateX(10deg); */ transform-origin: center left; }.last-page, .page { height: 280px; width: 250px; background: white; position: absolute; border-radius: 10px; /* transform: rotateX(10deg); */ transform-origin: center left; transition: all 3s; /* z-index: -1; */ } /*.page:nth-child(2) { transition-duration: 3s; }.page:nth-child(3) { transition-duration: 2.6s; }.page:nth-child(4) { transition-duration: 2.2s; }.page:nth-child(5) { transition-duration: 1.8s; }.page:nth-child(6) { transition-duration: 1.4s; }.book:hover.page:nth-child(2) { transition-duration: 6s; }.book:hover.page:nth-child(2) { transition-duration: 6s; }.book:hover.page:nth-child(3) { transition-duration: 5.6s; }.book:hover.page:nth-child(4) { transition-duration: 5.2s; }.book:hover.page:nth-child(5) { transition-duration: 4.8s; }.book:hover.page:nth-child(6) { transition-duration: 4.4s; } */.last-page > div { width: 150px; border-radius: 10px; margin: 20px auto; background-color: green; position: relative; /* z-index: -1; */ }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="js.js" defer> </script> </head> <body> <div class="book"> <div class="cover" data-index="7" data-position="right"> cover </div> <div class="page page-1" data-index="6" data-position="right"> page 1</div> <div class="page page-2" data-index="5" data-position="right"> page 2</div> <div class="page page-3" data-index="4" data-position="right"> page 3</div> <div class="page page-4" data-index="3" data-position="right"> page 4</div> <div class="last-page" data-index="2" data-position="right">page 5</div> <div class="back-cover" data-index="1" data-position="right"></div> </div> </body> </html>
2 個解決方案
解決方案1
0 2022-09-05 21:17:43
問題是transition: all 3s; . 您正在為所有屬性設置動畫，包括zIndex 。 如果改成transition: transform 3s; （在這兩個地方）它似乎表現得很好。 您可能需要添加更多屬性，我沒有檢查。
解決方案2
0 2022-09-05 21:22:11
這可能與您的transition: all 3s分嗎？ z-index有一個離散的 animation 類型，這意味着它們會進行動畫處理，但僅使用一個關鍵幀，如果我沒記錯的話，animation 會在持續時間的中途發生。
解決方案3
0 2022-09-06 06:05:54
請參考隨附的視頻更新以下 css 並嘗試運行並檢查。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: yellow;
perspective: 1000px;
}
.book {
display: flex;
align-items: center;
cursor: pointer;
}
.book:hover .cover{
/* transform: rotateX(10deg) rotateY(-180deg); */
}
.book:hover .page{
/* transform: rotateX(10deg) rotateY(-180deg); */
/* z-index: 2; */
}
.flip-to-left {
transform: rotateX(10deg) rotateY(-180deg);
}
.flip-to-right {
transform: rotateX(10deg) rotateY(0deg);
}
.cover {
z-index: 7;
/* transform: rotateX(10deg) rotateY(-180deg); */
transition: all 3s;
}
.cover{
z-index: 0;
}
.page-1 {
z-index: 2;
}
.page-2 {
z-index: 2;
}
.page-3 {
z-index: 2;
}
.page-4 {
z-index: 2;
}
.last-page {
z-index: 2;
}
.back-cover {
z-index: 3;
}
.back-cover,
.cover{
height: 300px;
width: 260px;
background-color: blue;
border-radius: 10px;
position: absolute;
box-shadow: 1px 1px 10px gray;
/* transform: rotateX(10deg); */
transform-origin: center left;
display: flex;
align-items: center;
justify-content: center;
}
.last-page,
.page {
height: 280px;
width: 250px;
background: linear-gradient(272deg, #ffffff, #858181);
position: absolute;
border-radius: 10px;
/* transform: rotateX(10deg); */
transform-origin: center left;
transition: all 3s;
display: flex;
align-items: center;
justify-content: center;
}
.last-page > div {
width: 150px;
border-radius: 10px;
margin: 20px auto;
background-color: green;
position: relative;
/* z-index: -1; */
}
z-index堆棧系統未按預期運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.