長風秋雁
2023-10-14 18:28:24
我是 Js 新手,我正在嘗試創建一個簡單的應用程序,我需要在動畫完成后調用 Angular 組件函數。對于動畫,我使用 Anime.js 并使用 Angular 框架來創建這個應用程序。我已經在 ngAfterViewInit 函數中添加了動畫代碼,并且我想在anime.js 的完整showOptions()回調中調用 Angular 組件的函數。但在完整的回調中,我無法訪問此組件函數。我嘗試定義組件對象comp,然后嘗試在回調函數中使用該對象來調用showOptions函數,但它給出了錯誤無法讀取未定義的屬性“showOptions”直接調用showOptions函數也不起作用。我的代碼:ngAfterViewInit(): void { var textWrapper = document.querySelector('.an-2'); textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); anime.timeline({loop: false}) .add({ targets: '.an-2 .letter', opacity: [0,1], easing: "easeInOutQuad", duration: 2250, comp: this, delay: (el, i) => 150 * (i+1), complete: function (anim) { console.log('Completed' + anim); this.comp.showOptions(); } }); }showOptions(){ console.log('Show options called.');}
1 回答

MYYA
TA貢獻1868條經驗 獲得超4個贊
將正?;卣{更改為箭頭函數,如下所示:-
ngAfterViewInit(): void {
var textWrapper = document.querySelector('.an-2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: false})
.add({
targets: '.an-2 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
comp: this,
delay: (el, i) => 150 * (i+1),
complete:(anim) => {
console.log('Completed' + anim);
this.comp.showOptions();
}
});
}
showOptions(){
console.log('Show options called.');
}
添加回答
舉報
0/150
提交
取消