角度动画：向模板触发器添加参数

Question

所以我正在制作个人资料页面，当页面加载时，我希望 4 个不同的文本框沿不同方向移动到它们的起始点（底部位置变为左侧，左侧变为顶部，...）

我可以为每个文本框制作不同的触发器，但这似乎不是最佳做法。我尝试向模板触发器添加参数（见下文），这样我可以只添加左侧和顶部位置（所有文本框都是绝对定位的），而无需为每个元素创建新触发器。

但是它给了我一个错误，所以我必须使用错误的语法。这方面的文档不多。有人知道正确的语法吗？因为我环顾四周，很难找到。

错误，逗号有误。

Template parse errors:
Parser Error: Unexpected token , at column 24 in [{params: {left_pos: 50%, top_pos: 95%}}] in ng:///AppModule/FindLocalsComponent.html@43:19 ("ileSection__data">{{ focussedUser?.birthDate | age}}</h3>
              </div>
              <div [ERROR ->][@moveText]="{params: {left_pos: 50%, top_pos: 95%}}" class="header-box header-box--left">

模板：我尝试了左侧框的触发器（@moveText）

<div class="profileSection" [ngClass]="{
      'visible': markerClicked,
      'not-visible': !markerClicked}
    ">
            <!--there should be a profile picture displayed here-->
            <!-- Other details that we want to display are conencted to the game, such details are currently unknown as we don't know more about the game-->
            <div class="profileSection__header" *ngIf="markerClicked">
              <img class="profileSection__img" *ngIf="!focussedUser?.profilePicture.uploaded" src="assets/images/blank-profile-picture.png" alt="no profile picture">
              <img class="profileSection__img" *ngIf="focussedUser?.profilePicture.uploaded" [src]="'assets/images/profile-pictures/' + focussedUser?.profilePicture.name" alt="the profile picture">
              <div class="header-box header-box--top">
                <h3 class="profileSection__data">{{ focussedUser?.username }}</h3>
              </div>
              <div class="header-box header-box--right">
                <h3 class="profileSection__data">Slytherin</h3>
              </div>
              <div class="header-box header-box--bottom">
                <h3 class="profileSection__data">{{ focussedUser?.birthDate | age}}</h3>
              </div>
              <div [@moveText]="{params: {left_pos: 50%, top_pos: 95%}}" class="header-box header-box--left">
                <h3 class="profileSection__data">Speciality: Potions</h3>
              </div>
              <button class="btn profileSection__btn profileSection__btn--first">Send PM</button>
              <button class="btn profileSection__btn profileSection__btn--sec">Visit Profile</button>
            </div>

组件

@Component({
    selector: 'find-locals',
    styleUrls: ['find-locals.component.css'],
    templateUrl: 'find-locals.component.html',
    animations: [
      trigger('moveText', [
        state('start', style({
          left: '{{ left_pos }}',
          top: '{{ top_pos }}'
        }), {params: {left_pos: 0, top_pos: 0}}),
        transition(':enter', [animate(2000)])
      ])
]
})

scss：这些是文本块的定位方式。我在下面拍摄了一张图片，说明它应该如何处理动画。例如，左边的文本框从该位置开始，并在动画开始时移动到它的目标位置

.header-box {
      display: block;
      position: absolute;
      width: 20%;
      word-wrap: break-word;
      text-align: center;

      &--top {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
      }

      &--right {
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
      }

      &--bottom {
        top: 95%;
        left: 50%;
        transform: translateX(-50%);
      }

      &--left {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
      }
    }

屏幕的右侧是我希望动画发生的地方。底部、右侧、左侧和顶部都有文字。

Answer 1

您需要将百分比值视为字符串。

将 HTML 更改为：

[@moveText]="{params: {left_pos: '50%', top_pos: '95%'}}"