我对 css-transition 有问题,它会在我需要它之前播放过渡。
问题之一是类pageFlip-trigger我需要通过 JavaScript 设置它的 CSS
依赖于响应式设计的 img 大小。但是在 JavaScript 将 css 设置为它之后,
它播放过渡动画,实际上它需要移动到
首先没有任何过渡动画的点,然后触发它然后播放。
如果您在 Javascript 中看到我的 ponit,那是我第一次将 CSS 设置为 pageFlip-trigger 类
它不会开始过渡,对吧??
我做错了什么??请指教
预先感谢。
这是我的 HTML
<div id="book-container">
<section page='0' class='page-setup sectionContent-trigger'>
<div class='page-wrapper pageContent-trigger'>
<img src='image/test1.png' alt=''/>
</div>
</section>
<section id="flip-container0" class="page-setup sectionFlip-trigger">
<div id="flip-page0" class="page-wrapper pageFlip-trigger"></div>
</section>
<section id="flip-container1" class="page-setup sectionFlip-trigger">
<div id="flip-page1" class="page-wrapper pageFlip-trigger"></div>
</section>
</div>
和 CSS
#book-container{
position: absolute;
left: 0;
right: 0;
top: 25px;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 80%;
max-width: 830px;
max-height: 520px;
}
#book-container .page-setup{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
#book-container .page-wrapper{
width: 100%;
height: 100%;
}
#book-container img{
max-width: 100%;
/*max-width: 830px;*/
/*max-height: 520px;*/
}
#book-container .sectionContent-trigger{
-webkit-transform: translate(0px, 0px) rotate(0deg);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.2s;
-ms-transform: translate(0px, 0px) rotate(0deg);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1.2s;
transform: translate(0px, 0px) rotate(0deg);
transition-property: transform;
transition-duration: 1.2s;
}
#book-container .pageContent-trigger{
-webkit-transform: translate(0px, 0px) rotate(0deg);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.2s;
-ms-transform: translate(0px, 0px) rotate(0deg);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1.2s;
transform: translate(0px, 0px) rotate(0deg);
transition-property: transform;
transition-duration: 1.2s;
}
#book-container .sectionFlip-trigger{
-webkit-transform : translate(0px, 0px) rotate(0deg);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.2s;
-ms-transform : translate(0px, 0px) rotate(0deg);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1.2s;
transform : translate(0px, 0px) rotate(0deg);
transition-property: transform;
transition-duration: 1.2s;
}
和 JS
$(document).ready(function(){
var pageWidth = "";
var pageHeight = "";
var currentFlip = 0;
var currentPage = 0;
$('section[page="0"] img').load(function(){
pageHeight = $(this).height();
pageWidth = $(this).width();
$('#book-container').height(pageHeight);
$('.pageFlip-trigger').css({
'background': 'whitesmoke',
'-webkit-transform': 'translate('+pageWidth+'px, 0px) rotate(0deg)',
'-webkit-transition-property': '-webkit-transform',
'-webkit-transition-duration': '1.2s',
'-ms-transform': 'translate('+pageWidth+'px, 0px) rotate(0deg)',
'-ms-transition-property': '-ms-transform',
'-ms-transition-duration': '1.2s',
'transform': 'translate('+pageWidth+'px, 0px) rotate(0deg)',
'transition-property': 'transform',
'transition-duration': '1.2s'
});
})
})