0

我对 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'
        });
    })
})
4

0 回答 0