Angular 2在点击动画时增加边距

问题描述：

几周前我开始使用angular2。今天我有一些动画问题。我想要做一些旋转木马的，但林不知道我如何能“玩”的角度动画状态...Angular 2在点击动画时增加边距

所以jQuery中这将是非常简单的喜欢这里： https://jsfiddle.net/o2gxgz9r/5157/

但我不有想法如何在角度上做到这一点。我试图做3个状态：下一步，上一步和空闲

所以在按钮“下一步”点击im改变状态到下一个 - 一切都很好，因为它的动画。

但问题出现在动画后，我将状态设置为空闲 - 元素重置边距并返回原始位置。

我该如何告诉角度 - 将状态更改为空闲，但元素应该保持在同一个地方？

也许我不需要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')), 
]) 
    ], 
})

我al所以试图从装饰器中删除状态空闲。我应该这样做，还是仅仅通过增加利润和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'; 
}

我添加一些CSS来我的div包装：

transition: all 1s ease-in-out;

但它是一个正确的答案？

Angular 2在点击动画时增加边距

相关推荐