How can i program my angular animation with dynamic values?


I have a page transition animation in angular between the home and the models page. Both page have a button, button my-button-start-page on the home page, my-button-end-page on the models page.

I would like to move the my-button-start-page to the my-button-end-page’s location during the transition. Is it even possible like how i tried in the code bellow?

/*transition between the Home and the Model page*/
transition('Home => Models', [
    style({ position: 'relative'}),
    query(':enter', [
            position: 'absolute',
            top: 0,
            right: 0,
            width: '100%', 
    query(':enter', [style({opacity: 0})]),

query('.my-button-start-page', [animate('3s ease-out', 
            **left: 'angular.element(.my-button-end-page).attr("left")',** 
            top: 'angular.element(.my-button-end-page).attr("top")', 
            width : 'angular.element(.my-button-end-page).attr("width")', 
            height : 'angular.element(.my-button-end-page).attr("height")',
            opacity: 0 }))]),

Source: Angular Questions

Categorized as angular, animation, transition Tagged , ,


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