css - Angular 动画 : add parameters to template trigger

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:这些是文本 block 的定位方式。我在下面拍了一张图片，说明它应该如何处理动画。例如左边的文本框从该位置开始，并在动画开始时移动到它的目的地

.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%'}}"