角度动画:将参数添加到模板触发器

所以我做了一个配置文件页面,当页面加载时,我希望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)])
      ])
]
})

这些是文本块的位置。我在下面拍了一张照片,说明它应该如何处理动画。e、 g左文本框从位置开始,在动画开始时移动到指定位置

.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%);
      }
    }

屏幕的右边是我想要动画发生的地方。在底部、右侧、左侧和顶部都有文本。