角动画左不工作答案

【问题标题】：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 的值可以完美运行，并且可以正确更改，但动画根本没有做任何事情。

【问题讨论】：

标签： css angular typescript animation components

【解决方案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

【讨论】：