0
  • Здравствуйте форумчане.
  • На днях я чуток доработал эффект в виде листания книги.
  • Во время перелистывания страницы ее анимация не успевает закончится а уже сразу становится видно следующую страницу.
  • Каким образом можно исправить этот баг?
  • Я уже все голову сломал(

$('.page1, .page2, .page3, .page4').on('click', function () {
 $(this).toggleClass('next');
});
.book {
width: 25%;
height: 360px;
position: relative;
margin-left: 40%;
margin-top: 10%;
perspective: 90vmax;
}

.page1 {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 0% 0% 0px;
z-index: 7;
background: gray;
transition: 1s;	
transform-style: preserve-3d;
}

.page2 {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 0% 0% 0px;
z-index: 6;
background: pink;
transition: 1s;	
transform-style: preserve-3d;
}
     
.page3 {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 0% 0% 0px;
z-index: 5;
background: orange;
transition: 1s;	
transform-style: preserve-3d;
}

         
.page4 {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 0% 0% 0px;
z-index: 4;
background: Brown ;
transition: 1s;	
transform-style: preserve-3d;
}
   
.next {
transform: rotateY(-180deg);
z-index: 1;
}

.text{
position: absolute;
font-size:20pt;
padding: 3%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="book">
  
<div class="page1" >
<div class="text">1-Cтраница </div>
</div>
  
<div class="page2">
<div class="text">2-Cтраница</div>
</div>
    
<div class="page3">
<div class="text">3-Cтраница </div>
</div>
   
<div class="page4">
<div class="text">4-Cтраница </div>
</div> 

</div>

1 ответ 1

0

Проблема в z-index

$('.page1, .page2, .page3, .page4').on('click', function () {
 $(this).toggleClass('next');
 //$('.page1, .page2, .page3, .page4').css("z-index","");
 $('.page1, .page2, .page3, .page4').removeAttr( 'style' );
 $(this).css("z-index","999");
});
1
  • Благодарю вас сударь))) Проблема была так близко а мне не хватило мозгов понять это( 29 мая 2019 в 19:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.