如何为 angular material 滑块拇指创建自定义气泡动画？

Question

我正在为内容版本控制实施 angular material 滑块。需要添加沿着滑块轨道跟随 mat-slider-thumb 的气泡。最大的问题是在每次 mat-slider-thumb 位置变化时触发动画。我是 angular 动画的超级新手，无法开始。如果有任何反馈，我将不胜感激！

<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

根据这个问题：您可以将 mat-slider 的输出添加到气泡 component/animation。

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

如何为 angular material 滑块拇指创建自定义气泡动画？

How can I create custom bubble animation for angular material slider thumb?

angular

angular-material

angular-animations