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

问题描述 投票:0回答:1

几个星期前我开始使用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转换来做到这一点?

javascript css angular animation
1个回答
0
投票

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

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;

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

© www.soinside.com 2019 - 2024. All rights reserved.