Как вызвать короля composer css анимация через jQuery?

Question

В настоящее время я работаю над одной пользовательской темой WordPress, и мы используем конструктор king composer для контента.

Каждый пост представляет собой один слайдер, а каждый раздел king composer представляет собой один слайд. Когда сообщение загружено и на первом слайде анимация короля composer css работает, но когда я go к следующему слайду анимации не активируются.

Это HTML, созданное королем composer строитель:

<div id="livingmemorial" class="lm-story-section fullpage-wrapper" style="height: 100%; position: relative; touch-action: none; transform: translate3d(0px, 0px, 0px);">
<section data-kc-fullheight="middle-content" class="kc-elm kc-css-17041 section kc_row fp-section active fp-table fp-completely" data-fp-styles="null" style="height: 657px;">
    <div class="fp-tableCell" style="height: 657px;">
        <div class="kc-row-container  kc-container  intro">
            <div class="kc-wrap-columns">
                <div class="kc-elm kc-css-139517 kc_col-sm-12 kc_column kc_col-sm-12">
                    <div class="kc-col-container">
                        <div class="kc-elm kc-css-605939 kc_text_block kc-pc-loaded">
                            <h1 style="color: #fff;font-size:72px">Lorem ipsum</h1>
                        </div>
                        <div class="kc-elm kc-css-834586 kc_text_block kc-pc-loaded" style="">
                            <h3 style="color: #fff;font-size:32px;"><em>Dolore sit amet</em></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section data-kc-fullheight="middle-content" class="kc-elm kc-css-521807 section kc_row fp-section fp-table" data-fp-styles="null" style="height: 657px;">
    <div class="fp-tableCell" style="height: 657px;">
        <div class="kc-row-container  kc-container  intro">
            <div class="kc-wrap-columns">
                <div class="kc-elm kc-css-705768 kc_col-sm-5 kc_column kc_col-sm-5">
                    <div class="kc-col-container">
                        <div class="kc-elm kc-css-655426 kc-animated kc-animate-eff-fadeInUp kc_text_block">
                            <h3 style="text-align: left; color: #fff; font-size: 32px;">Chapter 1</h3>
                        </div>
                        <div class="kc-elm kc-css-28636 kc-animated kc-animate-eff-fadeInUp kc-animate-delay-200 kc_text_block">
                            <h1 style="text-align: left; color: #fff; font-size: 72px;">Lorem ipsum</h1>
                        </div>
                        <div class="kc-elm kc-css-600603 kc-animated kc-animate-eff-fadeInUp kc-animate-delay-400 kc_text_block">
                            <p style="text-align: left; color: #fff; font-size: 21px; line-height: 1.3em;">Lorem ipsum dolore sit amet.</p>                                
                        </div>
                    </div>
                </div>
                <div class="kc-elm kc-css-408249 kc_col-sm-7 kc_column kc_col-sm-7">
                    <div class="kc-col-container"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Это JS код для слайдера:

<script type="text/javascript">
    var myFullpage = new fullpage('#livingmemorial', {
        scrollOverflow: true
    });
</script>

А вот и король composer JS: Здесь

А это слайдер JS: Здесь

В конце мой вопрос, может ли кто-нибудь объяснить мне, как снова вызвать анимацию короля composer когда go к следующему слайду.

Answer 1

Я нашел решение этой проблемы.

<script type="text/javascript">
    var myFullpage = new fullpage('#livingmemorial', {
        scrollOverflow: true,
        afterLoad: function (origin, destination, direction) {
            jQuery('section.active .kc-animated').each(function (index) {
                var clazz = jQuery(this).get(0).className, delay = 0, speed = '2s', timeout = 0;

                if (clazz.indexOf('kc-animate-delay-') > -1) {
                    delay = clazz.split('kc-animate-delay-')[1].split(' ')[0];

                    jQuery(this).css({'animation-delay': delay + 'ms'});
                    jQuery(this).removeClass('kc-animate-delay-' + delay);

                    timeout += parseInt(delay);
                }

                if (clazz.indexOf('kc-animate-speed-') > -1) {
                    speed = clazz.split('kc-animate-speed-')[1].split(' ')[0];

                    jQuery(this).css({'animation-duration': speed});
                    jQuery(this).removeClass('kc-animate-speed-' + speed);
                }

                if (clazz.indexOf('kc-animate-eff-') > -1) {
                    var eff = clazz.split('kc-animate-eff-')[1].split(' ')[0];

                    timeout += parseFloat(speed) * 1000;

                    jQuery(this).removeClass('kc-animated').addClass('animated ' + eff);

                    setTimeout(function (eff) {
                        jQuery(this).removeClass('animated kc-animated kc-animate-eff-' + eff + ' ' + eff);
                        jQuery(this).css({'animation-delay': '', 'animation-duration': ''});
                    }, timeout, jQuery(this), eff);
                }
            });
        }
    });
</script>