Hi, i’m trying to modify ionic side menu animation adding a blur filter to the app when menu’s showed. In order to do so, i’m using a angular directive. I already made the desired effect except the transition duration as it change when the menu opens/closes and the platform is ios or Android.
The directive class is like this:
export class BlurMenuDirective {
constructor(private el: ElementRef) {
this.setBackdropFilter('None');
}
@HostListener('ionWillOpen') ionWillOpen() {
this.setBackdropFilter('blur(2px)');
}
@HostListener('ionWillClose') ionWillClose() {
this.setBackdropFilter('None');
}
setBackdropFilter(value) {
this.el.nativeElement.style.backdropFilter = value;
}
}
I’ve been an hour looking for an answer. Any ideas? It doesn’t matters if i have to hard code the timing to the class or i access programmatically to it.