在角度2中,我尝试使用@angular/animations
制作一个组件,<li>
元素跟在鼠标(ondrag)
之后,并在(ondragend)
之后保持原位。我对角度很陌生,对于解决这个问题的最佳方法非常失败。我希望能够将我的组件中的字符串注入到动画中,但我不确定这是否可行。请参阅下面的示例。
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'test-test',
template: `
<li
*ngFor="let letter of list"
[@lettereState]="letter.state"
(ondrag)="letter.toggleState(); mouseCords($event.clientX, $event.clientY);"
(ondragend)="letter.toggleState()">
{{letter}}
</li> `,
animations: [
trigger('letterState', [
state('active', style({
transform: //'translate(Inject the cordinates here {mouseX}, {mouseY})',
})),
])
],
})
export class LetterBankComponent {
constructor(
) {}
private list = ['a', 'b', 'c']
private mouseX = ''
private mouseY = ''
}
mouseCords(x, y) {
mouseX = x;
mouseY = y;
}
答案 0 :(得分:0)
在将数据注入动画方面,这是一个功能请求,很快就会出现(参见https://github.com/angular/angular/issues/9668)。在具有可拖动元素方面,向元素添加[draggable]
似乎可以解决此问题