角度动画，过渡不适用于单一状态

Question

我对使用 Angular 8 开发的 div/cards 库有疑问。 我制作了一个 div/mask，其中包含一个相对位置的 div/containerCards。在 div/containerCards 中，我有 div/cards 的 % 尺寸并定位在绝对位置。我一次看到三张卡片，左侧有一个按钮，右侧有一个按钮，用于向左或向右移动 div/containerCards，更改“right”参数的值。

小部件工作正常，但我在转换时遇到问题，因为它不起作用。我在其他示例中看到转换需要两个状态才能正常工作，但我的问题是，是否可以使用具有单个状态的转换？

换句话说，如何在我的示例/小部件中激活转换？

谢谢大家。

我的.ts 文件：

animations: [
  trigger('movement', [
    state('move', style({
      right: '{{rightValue}}'+'%'
    }), { params: { rightValue: '{{rightValue}}'} }),
    transition('* <=> *', [
      animate('1.6s')
    ])
  ]),
]

this.cards = [{
  name: "First card"
},
{
  name: "Second card"
},
{
  name: "Third card"
},
{
  name: "Fourth card"
}]

left() {
  this.rightValue = this.rightValue - 34;
}

right() {
  this.rightValue = this.rightValue - 34;
}

moveCallback() {
  let values = {};

  values = {
    value: 'move',
      params: { rightValue: this.rightValue }
    }
  }
  return values;
}

我的html：

<div class="mask" [@movement]="moveCallback()">
  <div class="left-btn" (click)="left()">LEFT</div>
  <div class="containerCards">
    <div class="card" *ngFor="let item of cards; let i = index">
      <span>{{item.name}}</span>
    </div>
  </div>
  <div class="right-btn" (click)="right()">RIGHT</div>
</div>

我的CSS：

.mask {
  overflow: hidden;
  height: 90px;
}

.left-btn {
  position: absolute;
  top: 30px;
  right: 20px;
}

.right-btn {
  position: absolute;
  top: 30px;
  right: 20px;
}

.containerCards {
  position: relative;
}

.card {
  position: absolute;
  width: 33%;
}

Answer 1

要测试widget和transition的问题，可以点击stackblitz的这个链接：

https://stackblitz.com/edit/angular-ivy-fku48c