Question

我的应用程序中有时间轴视图，我想为包含当前日期的时间轴行设置动画。这是我的HTML代码。

<强烈> workout.html

<ion-content>

    <section id="cd-timeline" class="cd-container">
        <div *ngFor="let item of taskList; let i=index;" (click)="exerciseWatch(i)">
        <div class="cd-timeline-block">
            <!-- CUSTOMIZE YOUR STYLE USING DEFAULT IONIC VALUES SUCH AS POSITIVE, CALM, BALANCED,... -->
            <div class="cd-timeline-icon calm" text-center>
            <b>{{item.d}}/{{item.m}}</b>
            </div>
            <!-- CUSTOMIZE YOUR STYLE USING DEFAULT IONIC VALUES SUCH AS POSITIVE, CALM, BALANCED,... -->
            <div class="cd-timeline-content calm" padding>
            <h5 class="marginBottom0 marginTop0">{{item.name}}</h5>
            </div>
        </div>
        </div>
    </section>

</ion-content>

Answer 1

为您的动画创建一个CSS类，假设它叫做.animate-row。现在，您需要比较日期（如果您的商品上的日期与当前日期相同）。由于我不知道你是如何操纵你的DateTime我不能更具体，但创建一个带有当前日期的变量（让我们称之为currentDate）与你所用项目的日期格式相同环绕过来。

然后，您将使用[ngClass]动态地将动画设置为您的项目。

<div *ngFor="let item of taskList; let i=index;" (click)="exerciseWatch(i)" [ngClass]="{ 'animate-row': item.myItemDate == currentDate }">
  <!-- ALL YOUR HTML -->
</div>

如果条件匹配，

ngClass将为您的HTML标记添加一个类，在这种情况下，如果您的项目日期与当前日期相同。

希望这有帮助。

更新

制作一个JsFiddle来向您展示它是如何运作的。

如何在离子3.x中为包含当前日期的时间轴项目设置动画？

1 个答案:

更新