Question

我有一个包含三种动画状态的组件：hidden，visible和switch。该组件从hidden开始，数据从API中提取。 API调用完成后，我将状态设置为visible并显示组件。如果用户单击该组件，该组件将消失，并从API加载新内容。然后组件重新出现。

这一切都有效。但是我想要一种效果，即组件始终从左侧飞过并飞向右侧。我使用translateX(-200%)和translateX(200%) - 和translateX(0)执行此操作，当然是可见状态。我将opacity从0更改为1以获得更好的效果。

问题：我需要组件在状态200%和-200%之间从switch转到visible。否则它将（在第一次之后）从右侧而不是从左侧飞入。这不需要看到（不透明度保持在0）。

我已经尝试了keyframes，但没有设法获得干净的动画。有没有办法在没有过渡的情况下改变动画的起点（样式集）？

到目前为止，这是我的动画代码：

animations: [
  trigger('state', [
    state('hidden', style({opacity: 0, transform: 'translateX(-200%)'})),
    state('visible', style({opacity: 1, transform: 'translateX(0)'})),
    state('switch', style({opacity: 0, transform: 'translateX(200%)'})),
    transition('hidden => visible', animate('200ms 400ms ease-in-out')),
    transition('visible => switch', animate('200ms ease-in-out')),
    transition('switch => visible', [
      animate(400, keyframes([
        style({opacity: 0, transform: 'translateX(-200%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 0.4})
      ]))
    ])
  ])
]
})

Answer 1

对于其他任何想知道的人：如果将样式函数放在过渡函数中，则可以直接应用样式。像这样：

  animations: [
    trigger('flyInAnimation', [
      state('hidden', style({transform: 'translateX(-100%)'})),
      state('visible', style({transform: 'translateX(0)'})),
      state('switch', style({transform: 'translateX(100%)'})),
      transition('hidden => visible', animate('200ms 400ms ease-in-out')),
      transition('visible => switch', animate('200ms ease-in-out')),
      transition('switch => visible', [
        style({opacity: 0, transform: 'translateX(-100%)'}),
        animate('200ms 600ms ease-in-out')
      ])
    ])
  ]

在最后的过渡期。

当我从其他状态移除opacity属性并且仅在上一次转换中直接应用它时，我遇到的问题我可以看到中间状态和一切似乎不干净且工作正常消失（这样从右到左的移动是不可见的）。显然存在渲染问题。现在一切正常。

ng2 animation：如何更改状态之间的css属性

1 个答案: