Трут, как при прикосновении, на одном контейнере с угловой анимацией

Question

У меня есть карточка.Есть 2 кнопки.Так же, как пользователи трут могут смахивать вправо и влево с помощью этих кнопок.Я использовал угловую анимацию и простой HTML для этого.Я запутался, как сделать обе анимации в одном контейнере.

В настоящее время с предоставленным кодом карта идет правильно и возвращается на оба клика.Я хочу, чтобы это было 2 разных направления при 2 разных нажатиях кнопок.

TS

animations: [
    trigger(
      'swipe', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0},),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )

HTML

 <div class="card-cover">

                  <div class="main-card" *ngIf="tinder" [@swipe]>
                    <div class="main-card-content">
                      <p>Do You Deploy Commercial-Grade Antivirus And Firewalls Across Your Network?</p>
                    </div>
                    <div class="class-footer-content">
                      <div class="covering-ad">

                      </div>
                    </div>
                  </div>
                  <div class="first-card-shadow card-shadow"></div>
                  <div class="second-card-shadow card-shadow"></div>
                </div>

                <div class="action-buttons">
                  <button (click)="tinder = !tinder">yes</button>
                  <button (click)="tinder = !tinder">no</button>

                </div>
</div>

Я ищу результат.Новое в угловой анимации

Answer 1

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

Поместите ваши ключевые кадры в другой файл

import { keyframes, style,animate } from '@angular/animations';

export const swiperight = [
  style({ opacity: 1 }),
  style({ transform: 'translate3d(200%, 0, 0) rotate3d(0, 0, 1, 120deg)', opacity: 0 }),
]

export const swipeleft = [
  style({ opacity: 1 }),
  style({ transform: 'translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -120deg)', opacity: 0 }),
]

Так вы импортируете свои анимации

import * as kf from './keyframes';

Изарегистрируйте их в компоненте

  animations: [
    trigger('cardAnimator', [
      transition('* => swiperight', animate(750, keyframes(kf.swiperight))),
      transition('* => swipeleft', animate(750, keyframes(kf.swipeleft)))
    ])
  ]

Это видео объясняет это