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

Posted 2023-03-06

【中文标题】Angular 2在点击时增加动画边距

【英文标题】：Angular 2 increase margin in animation on click

【发布时间】：2017-09-01 14:54:28

【问题描述】：

几周前我开始使用 angular2。 今天我在动画方面遇到了一些问题。我想做某种旋转木马，但我不确定如何“玩”有角度的动画状态...

所以在 jQuery 中它会非常简单，如下所示： https://jsfiddle.net/o2gxgz9r/5157/

但我不知道如何在角度上做到这一点。 我尝试了 3 种状态：next、prev 和 idle

所以在“下一步”按钮上单击我将状态更改为下一个 - 一切都很好，因为它的动画。

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

我应该如何告诉 angular - 将状态更改为空闲但元素应该保持在同一个位置？

也许我不需要 3 个状态 - 只需要 2 个？

这是我的 Angular 代码示例：

部分模板：

<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 转换？

【参考方案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;

但这是正确的答案吗？