javascript - Jquery + GSAP 从 onComplete 函数访问本地计算的值

Question

如何从触发onComplete(当某个动画完成时)的函数传递或更新变量及其值。

整个 Action 发生在 onClick 函数内部，如下所示:

//Trigger animation on offer_button click
$offer_button.on('click', function (e) {
    //Vars:
    var $location = $(this).attr('href'),
        $dividerW = $('#divider').width(),
        $offer_headerW = $('#offer_header').width();


    e.preventDefault();

    $text_container.removeClass('reversing');

    //Nadajemy kontenerowi stan aktywny - KROK 1
    $text_container.addClass('playin');


    //display loader and then content function
    function completedFnc() {

        $content_wrapper.html('<div class="loader"><div class="uil-ring-css" style="transform:scale(0.51);"><div></div></div></div>');
        $content_wrapper.load($location + ' ' + '.ajax_content', function () {
            $content_wrapper.hide().fadeIn('slow');
            $content_wrapper.addClass('animation_complete');
            $('#ajax p').hyphenate('pl');
            $text_container.removeClass('playin');
        });

    }


    //place where animation, loader and content is called or not..
    if ($content_wrapper.hasClass('animation_complete')) {

        if ($(this).hasClass('data_retrieved')) {
            console.log('Content is already loaded. No need to refresh it.');
        }
        else {
            $offer_button.removeClass('data_retrieved'); //usuwamy klasę z poprzedniego przycisku
            $(this).addClass('data_retrieved');  //dodajemy klasę do ostatnio klikniętego przycisku
            completedFnc(); //wyświetlamy loader i wczytujemy treść (na końcu dodajemy klasę 'animation_complete')
            console.log('Animacja już wykonana, tylko ładujemy treści');

        }
    }
    else {


        //local vars
        var introduction = $('.introduction'),
            introductionH = introduction.outerHeight(),
            offer_containerH = $offer_text_container.outerHeight(),
            newWidth;


        function updateW() {
            //Calculate inner width for offer content
            var text_containerW = $text_container.width(),
                col1 = $('#offer_header').width(),
                col2 = $('#divider').width();

            newWidth = (text_containerW - col1 - col2 - 20) / text_containerW * 100;

        }


        console.log(newWidth);

        //Offer CSS calculating
        introduction.css({
            'height': introductionH + 'px'
        });
        $offer_text_container.css({
            'min-height': offer_containerH + 'px'
        });


        //Animation settings
        $anime = new TimelineMax({paused: true})
            .to('.button_row', 0.2, {opacity: 0})
            .to('.introduction', 0.4, {height: 0, autoAlpha: 0, display: 'none'})
            .to($text_container, 0.6, {
                transformPerspective: 1000, autoAlpha: 1, width: $value + 'px', onComplete: updateW
            }, 'now!')
            .to($image, 0.3, {opacity: 0, autoAlpha: 0}, 'now!')
            .to('.button_row a', 0.4, {marginTop: 0})
            .to('.button_row div.columns ', 0.4, {width: 12.5 + '%'})
            .to('.button_row', 0.4, {opacity: 1, delay: 0.2})
            .to($content_wrapper, .6, {css: {display: 'relative', minHeight: 200 + 'px'}})
            .to($switch, .6, {y: 35 + 'px', onComplete: completedFnc})
            .to('#offer_text', .4, {width: newWidth})
            .to($switch, .6, {
                opacity: 1,
                scale: 1,
                transformOrigin: "50% 50%",
                transformPerspective: 1000,
                autoAlpha: 1
            });


        $anime_small = new TimelineMax({paused: true})
            .to('.introduction', 0.4, {height: 0, autoAlpha: 0, display: 'none'})
            .to($content_wrapper, .6, {css: {display: 'relative', minHeight: 200 + 'px'}})
            .to($switch, .6, {y: 35 + 'px', onComplete: completedFnc})
            .to($switch, .6, {
                opacity: 1,
                scale: 1,
                transformOrigin: "50% 50%",
                transformPerspective: 1000,
                autoAlpha: 1
            });

        if ($(window).width() >= 641) {
            $anime.play();
        }
        else {
            $anime_small.play();
        }

        $offer_button.removeClass('data_retrieved');

        $(this).addClass('data_retrieved');
        //$text_container.removeClass('reversing');
    }
});

以下是我认为出现问题的地方:

else {


        //local vars
        var introduction = $('.introduction'),
            introductionH = introduction.outerHeight(),
            offer_containerH = $offer_text_container.outerHeight(),
            newWidth;


        function updateW() {
            //Calculate inner width for offer content
            var text_containerW = $text_container.width(),
                col1 = $('#offer_header').width(),
                col2 = $('#divider').width();

            newWidth = (text_containerW - col1 - col2 - 20) / text_containerW * 100;

        }


        console.log(newWidth);

        //Offer CSS calculating
        introduction.css({
            'height': introductionH + 'px'
        });
        $offer_text_container.css({
            'min-height': offer_containerH + 'px'
        });


        //Animation settings
        $anime = new TimelineMax({paused: true})
            .to('.button_row', 0.2, {opacity: 0})
            .to('.introduction', 0.4, {height: 0, autoAlpha: 0, display: 'none'})
            .to($text_container, 0.6, {
                transformPerspective: 1000, autoAlpha: 1, width: $value + 'px', onComplete: updateW
            }, 'now!')
            .to($image, 0.3, {opacity: 0, autoAlpha: 0}, 'now!')
            .to('.button_row a', 0.4, {marginTop: 0})
            .to('.button_row div.columns ', 0.4, {width: 12.5 + '%'})
            .to('.button_row', 0.4, {opacity: 1, delay: 0.2})
            .to($content_wrapper, .6, {css: {display: 'relative', minHeight: 200 + 'px'}})
            .to($switch, .6, {y: 35 + 'px', onComplete: completedFnc})
            .to('#offer_text', .4, {width: newWidth})
            .to($switch, .6, {
                opacity: 1,
                scale: 1,
                transformOrigin: "50% 50%",
                transformPerspective: 1000,
                autoAlpha: 1
            });

我将尝试简要解释上面的代码是如何工作的(或者我认为它是如何工作的)。

当您单击按钮时，您将补间(或动画，如果您不熟悉 GSAP)容器的宽度从 50% 到大约 90%。完成后，函数 updateW叫做;此函数计算容器内带有文本的 div 的新宽度。

在开始播放动画之前，带有文本的 div 的宽度约为 67%，当动画结束时它应该更新为大约 84%(取决于从 updateW 中检索到的值)。

尽管尝试了几个小时的命名空间、全局变量、局部变量，但我还是无法通过 newWidth来自 updateW 的值当它完成时；它总是返回 undefined .

我错过了什么？谢谢。

Answer 1

我找到了一个使用 css calc()

的解决方案

所有需要做的就是添加一个具有以下属性的新 css 类 calc(100% - 188px)。

非常简单，但有效。

我关于如何在函数之间传递变量值的问题仍然没有解决但不再需要