在 MDB 动画期间不隐藏数组的滑动项 Angular

Question

在动画过程中，有 6 个项目从 div 出来，如下图所示。

如何在动画期间隐藏滑动的元素。

使用 mdb 的轮播 angular

我无法上网或找不到问题的答案。

HTML:

        <mdb-carousel class="carousel-multi-item multi-animation" [animation]="'slide'">
            <ng-template #thenBlock >
                <mdb-carousel-item *ngFor="let cards of slides; let i = index">
                    <li  class="search-car__display-link" *ngFor="let car of cards ; let i index" >
                        <a [routerLink]="['/car-detail', car.id]">
                            <car-card [car]="i"></car-card>
                        </a>
                    </li>
                </mdb-carousel-item>
            </ng-template>
        </mdb-carousel>

SCSS:

.search-car {
    &__display-results {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    &__display-link {
        text-decoration: none;
        list-style: none;
        

        & > a {
            text-decoration: none;
        }
    }
}
.carousel-item {
    overflow: hidden;
    z-index: -100;
    &.active, &.carousel-item-right, &.carousel-item-next {
      display: flex !important;
      flex-wrap: wrap;
      z-index: 2;
    }
  }

Answer 1

修复！

编辑一些 HTML 结构，删除 ng-templates 和 ng-container 未添加的问题。它正在处理这段代码。

<mdb-carousel @displayFilteredCars [isControls]="true" class="carousel-multi-item multi-animation" [animation]="'slide'">
                <mdb-slide *ngFor="let cards of slides; let i = index">
                    <li  class="search-car__display-link" *ngFor="let car of cards ; let i index" >
                        <a [routerLink]="['/car-detail', car.id]">
                            <car-card [car]="i"></car-card>
                        </a>
                    </li>
                </mdb-slide>
</mdb-carousel>

在 MDB 动画期间不隐藏数组的滑动项 Angular

Not hidden slided items of array during animation in MDB Angular

css

angular

sass

angular-material

mdbootstrap