CODEWITHSUNDEEP
javascriptcssangulartypescriptangular-animations
Rubi Pandey
Rubi Pandey

Reputation: 453

Angular Animation Carousel

I have converted the following carousel from React to Angular but not able to achieve an animation effect for the same. Can you give me a solution? Can not achieve look and feel with angular animation.

Link for the carousel - https://codepen.io/andyNroses/pen/KaENLb

@component({
selector:'image-slider',
templateUrl:'image-slider.html',
animation:[{
    trigger('slideInOut',[
       transition(':enter',[
           style({transform:'translateX(-100%)', opacity:1}),
           animate:('600ms ease-in', style({transform:'translateX(0%)', opacity:0}))
       ]),
       transition(':leave',[
        style({transform:'translateX(0%)', opacity:1}),
        animate:('600ms ease-out', style({transform:'translateX(100%)', opacity:1}))
    ]) 
    ])
}]

})

<div class="sliderContainer">
<button (click)="prev()">prev<button>
<button (click)="next()">next<button>
<ul>
<li class="slide" @slideInOut><li>
<li class="slide" @slideInOut><li>
<li class="slide" @slideInOut><li>
</ul>

Upvotes: 2

Views: 743

Answers (1)

Kaylie
Kaylie

Reputation: 1

It works for me if I remove the ':' after animate and before the "("

snippet

Upvotes: 0

Related Questions