在 anime.js 的回调函数中访问 Angular 组件 属性/ 函数
Access Angular component property/ function inside callback functions of anime.js
我是 Js 的新手,我正在尝试创建一个简单的应用程序,我需要在动画完成后调用 Angular 组件函数。对于动画,我使用 anime.js 并使用 Angular 框架来创建此应用程序。
我在 ngAfterViewInit 函数中添加了动画代码,我想在 complete 回调中调用 Angular 组件的 showOptions()
函数32=]。
但是在 complete 回调中我无法访问这个组件函数。我尝试定义组件对象 comp,然后尝试在回调函数中使用此对象来调用 showOptions 函数,但它给出了错误
Cannot read property 'showOptions' of undefined
同样直接调用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.');
}
将正常回调更改为箭头函数,如下所示:-
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.');
}
我是 Js 的新手,我正在尝试创建一个简单的应用程序,我需要在动画完成后调用 Angular 组件函数。对于动画,我使用 anime.js 并使用 Angular 框架来创建此应用程序。
我在 ngAfterViewInit 函数中添加了动画代码,我想在 complete 回调中调用 Angular 组件的 showOptions()
函数32=]。
但是在 complete 回调中我无法访问这个组件函数。我尝试定义组件对象 comp,然后尝试在回调函数中使用此对象来调用 showOptions 函数,但它给出了错误
Cannot read property 'showOptions' of undefined
同样直接调用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.');
}
将正常回调更改为箭头函数,如下所示:-
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.');
}