Question

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

想法是从不透明度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。

那里有动画迷吗？

Answer 1

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

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

Angular Fade In Out动画不起作用

1 个答案: