How to modify CSS variable in an angular animation state

Published

I’m creating a "draggable" component which can be moved on the page and plays an animation when destroyed. I am curently setting the style.transform attribute of the component host to translate3d to change its position on the document:

@Component({
    selector: 'app-window',
    templateUrl: './window.component.html',
    styleUrls: ['./window.component.scss'],
    animations: [
        trigger('WindowAnimation', [
            state('void', style({ 
                opacity: '0',
                transform: 'scale(0)', // host is `display: block`
            })),
            transition('* => void', [
                animate('1000ms ease-out')
            ])
        ])
    ]
})
export class WindowComponent implements OnInit {
    @Input('left') public left: number = 0;
    @Input('top') public top: number = 0;
    @HostBinding('@WindowAnimation') animation: boolean = true;
    @HostBinding('style.transform') get hostTransform(): string {
        return `translate3d(${this.left}px, ${this.top}px, 0px)`;
    }
}

The problem is that the scale part of the animation isn’t played. I think this is because the component host already has a style.transform attribute given by the hostbinding: if I remove the style.transform hostbinding, the animation plays correctly, but I loose control over the component position. I then tried to solve the problem using CSS variable by replacing the hostbinding with the following:

@HostBinding('style.transform') get hostTransform(): string {
    return `translate3d(${this.left}px, ${this.top}px, 0px) scale(var(--host-scale, 1))`;
}

But then, I need to modify the --host-scale CSS variable during the animation. I tried something like this without any success:

// [...]
state('void', style({ 
    opacity: '0',
    '--host-scale': `0`, // fails at runtime with '"--host-scale" is not a supported CSS property for animations'
})),
// [...]

Is it possible to tell Angular to "add" a parameter to the already existing style.transform attribute or to change the value of a CSS variable during an animation ?

Source: Angular Questions

Published
Categorized as angular, animation, css Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq