As I delve into this informative resource, my goal is to incorporate some animations into my applications, but I find myself grappling with understanding how the animations are triggered.
HTML Component
<div class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li>
<span (click)="open()" class="glyphicons glyphicons-show-lines">open</span>
</li>
</ul>
</div>
<div class="vertical-menu" @verticalOpen="openOrClose">
<div class="list-group table-of-contents">
<a class="list-group-item" [routerLink]="['/login']" routerLinkActive="active">Login</a>
<a class="list-group-item" [routerLink]="['/personalArea']" routerLinkActive="active">Personal Area</a>
</div>
</div>
TS File
@Component({
selector:'menu-bar',
templateUrl:'app/components/menubar/menubar.component.html',
styleUrls:['app/components/menubar/menubar.component.css'],
directives:[ROUTER_DIRECTIVES],
animations:[
trigger('verticalOpen',[
state('inactive',style({
left: '-115px',
transform:'scale(1)',
backgroundColor:'red'
})),
state('active',style({
left: '0px',
transform:'scale(1.3)'
})),
transition('active => inactive', animate('100ms ease-in')),
transition('inactive => active', animate('100ms ease-out'))
])
]
})
export class MenuBar{
closeOrOpen:string;
open(){
if(this.closeOrOpen=='inactive'){
this.closeOrOpen='active'
}
else if(this.closeOrOpen=='active'){
this.closeOrOpen='inactive'
}
else{
this.closeOrOpen='inactive'
}
console.log(this.closeOrOpen)
}
}
My aim is to trigger a style change with a button, yet when I click, nothing seems to happen. Upon reviewing the code provided, no errors jump out at me. Can anyone spot what might be missing or incorrect in my approach?