Как создать собственную пузырьковую анимацию для большого пальца углового слайдера?

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

Согласно этому вопросу: Параметр в анимации Вы можете добавить свои выходные данные из ползунка циновки к компоненту / анимации пузыря.

Ответ также предоставляет пример, который подходит для вашегопроблема.