css - 左 Angular 动画不起作用

Question

我正在为 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 的值工作得很好并且可以正确更改，但是动画根本没有做任何事情。

Answer 1

您基本上没有对动画执行任何操作，也许这就是为什么即使 DOM 中的状态正在发生变化，您也看不到任何变化的原因。例如在你的代码中你有:

params: {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