jquery - JavaScriptでCSSトランジションを設定するだけで、トリガーなしでアニメーションを再生します

Question

必要になる前にトランジションを実行する css-transition に問題があります。

問題の 1 つは、JavaScript で CSS を設定する必要があるクラスpageFlip-triggerです。

レスポンシブ デザインの画像サイズに依存します。しかし、JavaScript がそれに css を設定した後、

実際に移動する必要があるトランジションアニメーションを再生します

最初に遷移のないポイントがアニメーション化され、次にトリガー後に再生されます。

私のponitがJavascriptで表示されている場合は、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'
        });
    })
})