Question

几周前我开始使用angular2。今天我的动画有些问题。我想做一些旋转木马，但我不知道我怎么能玩＃34;角动画状态......

所以在jQuery中它会像这里一样非常简单： https://jsfiddle.net/o2gxgz9r/5157/

但我不知道如何在角度上做到这一点。我试图做3种状态：下一步，上一步和空闲

所以在按钮＆＃34; next＆＃34;点击我改变状态到下一个 - 一切都很好，因为它的动画。

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

我应该如何判断角度 - 将状态更改为空闲但元素应保持在同一位置？

也许我不需要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转换来做到这一点？

Answer 1

我用另一种方式解决了它 - 没有角度动画。有一个答案

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;

但这是一个正确的答案吗？

Angular 2在点击动画中增加了边距

1 个答案: