Я новичок в Angular, поэтому подробное объяснение было бы полезно.
Я рисую несколько кругов, используя шаблон ниже:
<div (window:resize)="onEatableResized($event)">
<svg id="eater" (click)="onEaterClicked()"
[@eater_circle_trigger]="eater_clicked ? 'eater_clicked' : 'none'"
(@eater_circle_trigger.done)="onEaterDone($event)"
[attr.width]=eater_data.box_size
[attr.height]=eater_data.box_size>
<circle cx="20" cy="20" stroke-width="1"
[attr.r]=eater_data.radius
[attr.stroke]=eater_data.stroke_color
[attr.fill]=eater_data.fill_color>
</circle>
</svg>
<svg *ngFor="let ncircles of total_circles|times; index as id"
id="{{ 'eatable_' + id }}"
[attr.width]=eatable_data.box_size
[attr.height]=eatable_data.box_size>
<circle cx="20" cy="20" stroke-width="1"
[@eater_trigger]="id < current_eatable ? 'dead' : 'alive'"
[attr.r]=eatable_data.radius
[attr.stroke]=eatable_data.stroke_color
[attr.fill]=eatable_data.fill_color
/>
</svg>
</div>
Это выглядит так:
введите описание изображения здесь
При щелчке по красному кругу он перемещается к следующему кругу справа с помощью триггера eater_circle_trigger
:
animations: [
trigger('eater_circle_trigger', [
state('eater_clicked', style({
transform: 'translate(35px, 0px)'
})),
transition('* => eater_clicked', [
animate('1s ease-in-out')
])
]),
trigger('eater_trigger', [
state('dead', style({
fill: 'white'
})),
])
]
Я использую transform: 'translate(35px, 0px)'
и это работает, потому что я знаю его позицию. Я не хочу, чтобы так работало. Я хочу найти положение следующего круга и переместить туда красный круг без использования константы translate(35px, 0px)
. Это должно быть 'translate(' + xt + ', ' + ' yt ')'
, где xt
и yt
- координаты следующего круга.
Как это сделать в Angular? Если есть лучшее решение, вы тоже можете его предложить.