如何为角形材质滑块创建自定义气泡动画？

Question

我正在实现角度材质滑块以进行内容版本控制。要求添加沿着滑块轨道跟随mat-slider-thumb的气泡。最大的问题是在每个垫-滑块-拇指位置变化时触发动画。 我对角度动画非常陌生，无法启动。 我将不胜感激！

<div fxLayout="column" fxFlex="100">
    <p><strong>Compare version</strong></p>
    <mat-slider 
        [disabled]="disableSlider"
        tickInterval="1" 
        [step]="revisionsCount" 
        color="primary" class="slider" 
        (input)="getCurrentVersion($event)">
    </mat-slider>
<!-- here is the bubble that could follow along -->
    <span class="slider-cloudet" *ngIf="revision !== undefined">
        <mat-icon>today</mat-icon>
        {{ revision.date | date: 'dd-MM-yyyy' }}
        <mat-icon>restore</mat-icon>
        {{ revision.date | date: 'HH:mm' }}
    </span>
</div>

Answer 1

根据以下问题：Parameter into animation，您可以将来自mat-slider的输出添加到气泡组件/动画中。

答案还提供了适合您问题的示例。