如何从触发 onComplete 的函数（当某个动画完成时）传递或更新变量及其值。
整个动作发生在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。
我错过了什么？感谢。
答案 0 :(得分：0)
我找到了一个使用css calc（）
的解决方案所有必须做的就是添加一个新的css类，其中包含以下属性 calc（100％ - 188px）。
非常简单但有效。
关于如何在函数之间传递变量值的问题仍未解决，但不再需要