I'm currently working on a project involving a book that flips on click on both sides. The process involves checking the direction when a page is clicked and flipping it to the left if it's not to the right. Additionally, I adjust the z-index to maintain the order of the pages.
However, I've encountered an issue. When I flip the page back to the right from the left, the z-index is applied correctly, but there is a delay in the rendering on the screen. Despite the z-index being updated correctly in the console log, the change is not immediately reflected. I'm unsure of what I might be overlooking. Can anyone provide any insight? Thank you.
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>