I'm attempting to create a fade-in animation for a div element.
Here is the code snippet:
import {
Component,
trigger,
state,
style,
transition,
animate,
keyframes,
group
} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button (click)="toggle()"> toggle div </div>
<div [@visibilityChanged]="visibilityState">
<p>Some text...</p>
</div>`,
animations:
[
trigger('visibilityChanged', [
state('shown', style({opacity: 1})),
state('hidden', style({opacity: 0})),
transition('shown => hidden', animate('600ms')),
transition('hidden=> shown ', animate('300ms')),
])
],
})
export class AppComponent {
visibilityState : string = 'hidden';
toggle(){
if(this.visibilityState === 'hidden')
this.visibilityState = 'shown';
else
this.visibilityState = 'hidden';
}
}
Despite setting the visibility state to 'hidden', the text "Some text..." still appears visible. The toggle function seems ineffective and other click events are not responsive in the code. Removing the div solves the issue as the program begins working correctly, but it loses the fade-in/out animation feature. What could be causing this problem? Any suggestions or insights would be greatly appreciated!