【发布时间】：2016-04-02 22:06:04
【问题描述】：
如何通过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 检索到的值）。
尽管尝试了几个小时的命名空间、全局变量、本地变量，但完成后我无法从 updateW 传递 newWidth 值；它总是返回undefined。
我错过了什么？谢谢。
【问题讨论】：
-
你确定
updateW()被解雇了吗？看起来您正在定义它，但实际上并未调用它。 -
请查看第三个 GSAP .to($text_container... - 最后有 updateW。计算得很好。如果我在 updateW 末尾添加 console.log(newWidth)它会显示正确的值。
-
请问您可以创建一个小提琴吗？这里发生了很多事情，至少对我来说有点难以理解。
标签： javascript jquery html css gsap