首页 文章

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

提问于
浏览 次
0

几个星期前我开始使用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;

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

    回复于

相关问题