【问题标题】：Tinder like onclick swiping on the same container with angular animations火种像 onclick 在同一个容器上滑动，带有角度动画
【发布时间】：2019-11-05 13:28:25
【问题描述】：

我有一张卡片。有 2 个按钮。就像 tinder 用户可以使用这些按钮左右滑动一样。我一直在为此使用角度动画和纯 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>

我正在四处寻找结果。角度动画新手

【问题讨论】：

标签： html angular animation

【解决方案1】：

我需要这样的东西，我已经建立了一个概念证明，你可以在 stackblitz 上看到它。设计取自here

将关键帧放在另一个文件中

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)))
    ])
  ]

这个视频解释了this

【讨论】：