如何在PrimeNG Angular中对旋转木马进行缩放效果-解网

问：

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

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 代码（angular 模板）

<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>

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

CSS Angular 轮播 primeng

::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);
    }
  }

上一个：为什么 TextArea 焦点不允许用户选择和复制文本？

下一个：在组件中使用对象时，ngClass 不切换值

如何在PrimeNG Angular中对旋转木马进行缩放效果

How to zoom effect on a carousel in PrimeNG Angular

评论