Angular2运动动画
角度1手柄进入，离开和移动动画。角2文档描述了如何进入和离开动画(void => *和* => void)，但是如何在角2中实现移动动画呢？
回答 1
Stack Overflow用户
发布于 2016-08-15 02:06:24
如果你还没有读角的官方动画指南的话。
您可以定义动画状态和它们之间的转换。例如：
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]inactive和active可以被任意字符串替换，您可以拥有任意多个唯一的状态，但是必须对每个字符串进行有效的转换，否则动画就不会发生。void是一个特例，当元素尚未附加到视图时，*是一个通配符，适用于任何定义的状态。
编辑：
嗯..。首先，您可能可以使用这个可排序的图书馆。它声称支持角2，并且是纯Javascript (没有jQuery)，所以理论上，它应该工作得很好，但我自己还没有使用它。
否则，我确信这是可能的纯粹在角度2，但它可能需要一些相当聪明的代码。相对运动(不管组件或元素的特定位置)使用transform: translateY()属性很容易。问题是，只有当组件处于该状态时，角2动画状态才适用。因此，如果您给它一个translateY(-20 up )将一个元素向上移动一个位置，那么如果您想要再次将它向上移动，它就不会保持该位置。
有关我想出的解决方案，请参见这个柱塞。
template: `
<div #thisElement>
<div class="div-box" @moveState="state">Click buttons to move <div>
</div>
<button (click)="moveUp()">Up</button>
<button (click)="moveDown()">Down</button>
`,我为“moveUp”和“moveDown”定义了动画状态，这些状态仅适用于实际动画，而“静态”状态是在组件不移动时应用的。
animations: [
trigger('moveState', [
state('moveUp', style({
transform: 'translateY(-30px)';
})),
state('moveDown', style({
transform: 'translateY(30px)';
})),
state('static', style({
transform: 'translateY(0)';
})),
transition('* => moveUp', animate('100ms ease-in')),
transition('* => moveDown', animate('100ms ease-out')),
transition('* => static', animate('0ms linear'))
])
]对于实际启动动画的函数，它应用“moveUp”或“moveDown”状态，然后启动一个超时，该超时在转换时间等于时间之后触发回调。在回调中，它将动画状态设置为“静态”(向“静态”状态的转换设置为0 ms，因此我们不会实际将其动画化回静态位置)。然后，我们使用Renderer为我们希望它最终结束的位置应用一个转换(使用一个位置属性来计算它相对于最初位置的位置，而不是它在数组中的位置)。渲染器将其样式与动画分开应用，这样我们就可以应用这两种样式，而不会相互冲突。
export class MyComponent {
state = 'static';
@ViewChild('thisElement') thisBox: ElementRef;
position: number = 0;
//...
moveUp() {
this.state = 'moveUp';
this.position--;
setTimeout(() => {
this.state = 'static';
this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)');
}, 100)
}
moveDown() {
this.state = 'moveDown';
this.position++;
setTimeout(() => {
this.state = 'static';
this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)');
}, 100)
}
//...
}这只是一个例子，说明你可以如何动画移动，而不必为每个可能的位置定义状态。至于触发数组操作上的动画，您必须自己解决。我会使用EventEmitters或Subject的某种实现来向组件发送事件，然后这些组件将决定它们是否需要动画。
https://stackoverflow.com/questions/38946728
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号