TS

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上看到它。该设计取自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

像onclick一样用角度动画在同一个容器上滑动的火种

TS

HTML

1 个答案: