如何在 PrimeNG Angular 中的轮播上缩放效果

Question

我需要在轮播上添加放大效果。只有活动图像才应放大。 我添加了下面的代码，它按预期工作，但我发现了一个问题。

CSS代码

::ng-deep p-carousel .p-carousel-item-active {
    transition: all 1.5s ease 0s;
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    cursor: zoom-out;
}

HTML 代码（角度模板）

<p-carousel [value]="products" [numVisible]="1"  [circular]="true" [showIndicators]="false"  [autoplayInterval]="5000" [showNavigators]="false">
    <ng-template let-product pTemplate="item">
        <img src="assets/img/{{product.name}}" alt="{{product.name}}" width="100%" height="550px">
    </ng-template>
</p-carousel>

问题：页面加载时，第一个活动图像没有缩放效果。

Answer 1

通过使用

animation

和

@keyframes

我实现了图像的放大和缩小动画。

::ng-deep p-carousel .p-carousel-item-active {
    animation: zoom-in-out 10s ease infinite;
}

@keyframes zoom-in-out {
    0% {
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
      -webkit-transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
    }
  }