Итак, я создаю страницу профиля, и когда страница загружается, я хочу, чтобы 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%);
}
}
В правой части экрана я хочу, чтобы анимация происходила. внизу, справа, слева и сверху есть текст.
