Прикрепите кнопку на ползунке в Angular

Question

У меня есть кнопка сверху моего ползунка, поэтому в настоящее время я могу перемещать анимацию слева направо и наоборот при нажатии кнопки.Но когда я это делаю, кнопка движется отдельно и чувствую, что она отсоединена от слайдера.Как сделать так, чтобы любая подсказка была полезна.

В этом ПРИМЕРЕ мы можем видеть, как существует область обратной связи, которая при наведении мыши скользит по панели, поэтому в моем случае это Обратная связькнопка должна действовать одинаково.

HTML:

    <div class="container" [@slide]="slideOpen ? true : false">
      <button [class.button-resize-expand]="!slideOpen"
              [class.button-resize-collapse]="slideOpen"
              (click)="togglePanel()">
        <i class="rotate-chevron" [class.rotate-clicked]="!slideOpen">{{slideOpen ? 'chevron_left' : 'chevron_right'}}</i>
      </button>

      <div *ngIf="slideOpen"></div> 
</div>

TS:

animations: [
    trigger('slide', [
      transition('* <=> *', [
        group([
          query(':enter', [
            style({transform: 'translateX(-100%)'}),
            animate('.3s', style({transform: 'translateX(0%)'}))
          ], {optional: true}),
          query(':leave', [
            style({transform: 'translateX(0%)'}),
            animate('.3s', style({transform: 'translateX(-100%)'}))
          ], {optional: true}),
        ])
      ])
    ])
  ]

Answer 1

Вот код stackblitz , и он работает, я использовал немного CSS и другой триггерный элемент в угловой анимации.

Вот ресурсы, которые можно использовать для справки

HTML:

<div class="container" [@slide]="isOpen ? true : false">
  <button [class.button-resize-expand]="!isOpen"
          [class.button-resize-collapse]="isOpen"
          (click)="togglePanel()" [@openClose] ="isOpen ? 'open': 'closed'">
    <mat-icon class="rotate-chevron" [class.rotate-clicked]="!isOpen">{{panelExpanded ? 'chevron_left' : 'chevron_right'}}</mat-icon>
  </button>

  <div *ngIf="isOpen" class="expandable-panel">
    <div class="current-task-info">
      So much data here damn!
    </div>
  </div>
</div>

TS:

type isOpen = true|false;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ],
  animations: [
    trigger('slide', [
      transition('* <=> *', [
        group([
          query(':enter', [
            style({transform: 'translateX(-100%)'}),
            animate('.3s', style({transform: 'translateX(0%)'}))
          ], {optional: true}),
          query(':leave', [
            style({transform: 'translateX(0%)'}),
            animate('.3s', style({transform: 'translateX(-100%)'}))
          ], {optional: true}),
        ])
      ])
    ]),
    trigger('openClose', [
      // ...
      state('open', style({
        animation: 'slidefront .3s linear 0s forwards'
      })),
      state('closed', style({
        animation: 'slideback .3s linear 0s backwards, bounce 1.5s'
      }))
    ]),
  ]
})
export class AppComponent  {
  isOpen = true;

  togglePanel(): void {
    this.isOpen = !this.isOpen;
  }
}

CSS:

@keyframes slidefront {
    from {left: 0%;}
    to {left: 80%;}
  }

  @keyframes slideback {
    from {right: 5%;}
    to {right: 80%;}
  }