角动画左不工作

Posted 2023-02-23

【中文标题】角动画左不工作

【英文标题】：Angular animate Left is not working

【发布时间】：2018-10-03 15:38:40

【问题描述】：

我正在为 Slider 制作一个组件，但 css 的“left”属性的转换不起作用，我不知道我做错了什么。

这是我的动画：

animations: [
    trigger('slide', [
      state('move1', style(
        left: 'left'
      ),params: left: '0px'),
      state('move2',   style(
        left: 'left'
      ),params: left: '0px' ),
      transition('move1 <=> move2', animate('350ms ease-in-out'))
    ])
  ]

我正在动态传递“left”的值，但没有在状态之间运行动画。

left 的值可以完美运行，并且可以正确更改，但动画根本没有做任何事情。

【参考方案1】：

您实际上没有对动画做任何事情，也许这就是为什么即使 DOM 中的状态发生变化，您也没有看到任何变化的原因。例如，在您的代码中，您有：

参数：left: '0px'

适用于您的两个州。

您需要在第二个状态上具有不同的属性值才能看到一些区别因素。例如，在您的代码中，您可能会有如下所示的内容：

animations: [
  trigger('slide', [
  state('move1', style(
    left: 'left'
  ),params: left: '0px'),
  state('move2',   style(
    left: 'left'
  ),params: left: '500px' ),
  transition('move1 <=> move2', animate('350ms ease-in-out'))
])]

这样，在第二种状态下，元素向左移动 500px。我将提供另一个示例，明确说明我的意思。

animations: [
trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style(transform: 'translateY(-100%)', opacity: 0),
      animate('500ms', style(transform: 'translateY(0)', 'opacity': 1))
    ]
  ),
  transition(
    ':leave', [
      style(transform: 'translateY(0)', 'opacity': 1),
      animate('500ms', style(transform: 'translateY(-100%)', 'opacity': 0)),
    ]
  )]
)]

注意 translateY 参数值的变化。希望这可以解决一些问题！祝你好运！ :D