我想使用角度动画包实现一个简单的动画

想法是仅从不透明度0过渡到不透明度1以提供淡入淡出的感觉。

我可以使它适用于其他属性,例如高度和显示,但不能用于不透明度。

这是小动画

trigger('fadeInOut', [
  state('initial', style({
    'display': 'none',
    'opacity': '0'
  })),
  state('final', style({
    'opacity': '1'
  })),
  transition('initial <=> final', [
    animate('200ms')
  ])
])


而HTML中的触发器如下:

<div class="tu-plus-wrapper__content" [@fadeInOut]="privateMode">
    <div class="tu-plus-wrapper__content__points">{{points | number}}</div>
    <div class="tu-plus-wrapper__content__text">Puntos</div>
</div>


它位于一个名为privateMode的属性上,该属性根据切换按钮而变化。

但是它什么也没做,显示效果很好,但是看起来过渡很粗糙,我想使用不透明度来获得更好的UI。

那里有动画迷吗?

最佳答案

我相信opacity接受数字参数而不是字符串,将传递opacity属性的值周围的''删除,如下所示:

trigger('fadeInOut', [
 state('initial', style({
  'display': 'none',
  'opacity': 0
 })),
 state('final', style({
  'opacity': 1
 })),
 transition('initial <=> final', [
  animate('200ms')
 ])
])

10-06 04:18
查看更多