角度动画轮播

Question

我已将以下轮播从 React 转换为 Angular，但无法实现相同的动画效果。你能给我一个解决方案吗？无法通过角度动画实现外观和感觉。

轮播链接 - 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>

Answer 1

如果我删除 animate 之后和“(”之前的 ':'，它对我有用

片段