我正在为 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 的值工作得很好并且可以正确更改,但是动画根本没有做任何事情。
最佳答案
您基本上没有对动画执行任何操作,也许这就是为什么即使 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
关于css - 左 Angular 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49983669/