只需使用JavaScript设置CSS Transition，但它在没有触发器的情况下播放动画

Question

我遇到了css-transition的问题，它在我需要它之前就进行了转换。

问题一个是类 pageFlip-trigger ，我需要通过JavaScript设置其CSS

取决于img大小的响应式设计。但是在JavaScript设置css之后，

它播放转换动画，实际上它需要转移到

没有任何过渡动画的点首先然后触发它然后播放。

如果您在Javascript中看到我的ponit，那么我第一次将CSS设置为class 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>

AND 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;
 }

AND 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'
        });
    })
})