CODEWITHSUNDEEP
angular
szarancza ze spizu
szarancza ze spizu

Reputation: 87

Angular 5 and animate sliding to the right

I want to do animation on div, that changes width of element from 100% to 20%, collapsing from left to right side and right border of div should stay on the same place. I created animation that collapse div from right to left by changing width from 100% to 20%:

export const CardSlideAnimation = trigger('cardSlideAnimation',
[
    state('slideToRight', style({
      width: '20%'
    })),
    transition('* => *', animate('2000ms ease-out'))
]);

I dont have idea how to collapse div from left to right.

Upvotes: 0

Views: 90

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14221

On the element that is being animated, have it float: right. This will have the element stay to the right and when it collapses it will collapse to the right.

Demo

Upvotes: 1

Related Questions