几个星期前我开始使用angular2。今天我的动画有些问题。我想做一些旋转木马,但我不知道怎么能用角动画状态“玩”...
所以在jQuery中它会非常简单,就像这里:https://jsfiddle.net/o2gxgz9r/5157/
但我不知道如何在角度上做到这一点。我试图做3种状态:接下来,上一个和空闲
所以在按钮“下一步”点击我改变状态到下一个 - 一切都很好,因为它的动画。
但问题在动画之后开始我将状态设置为空闲 - 元素重置边距并返回到原始位置。
我该如何判断角度 - 将状态改为空闲但元素应该保持在同一个地方?
也许我不需要3个州 - 只有2个?
这是我的角度代码示例:
模板的一部分:
<div id="room-compare-slider" #roomSlider [@slider]="sliderState" (@slider.done)="animationDone($event)">some content</div>
我的component.ts文件
sliderState: 'prev' | 'next' | 'void';
ngOnInit() {
this.sliderState = 'void';
}
animnateNext() {
this.sliderState = 'next';
}
animationDone() {
this.sliderState = 'void';
}
和组件动画装饰
@Component({
selector: 'app-room-compare',
templateUrl: './room-compare.component.html',
styleUrls: ['./room-compare.component.css'],
animations: [
trigger('slider', [
state('prev',
style({
marginLeft: 0
})),
state('void',
style({
marginLeft: '*'
})),
state('next',
style({
marginLeft: -200
})),
transition('* => *', animate('0.2s, linear')),
])
],
})
我还尝试从装饰器中删除状态空闲。我应该这样做,还是只是通过保证金增加和css转换来做到这一点?
我用另一种方式解决了它 - 没有角度动画。有一个答案
animnateNext(){
let currentMargin = parseInt(this.roomSlider.nativeElement.style.marginLeft);
if(isNaN(currentMargin)){
currentMargin = 0;
}
let newMargin = currentMargin - 275;
this.roomSlider.nativeElement.style.marginLeft = newMargin+'px';
}
我在div包装器中添加了一些css:
transition: all 1s ease-in-out;
但这是一个正确的答案吗?