ANgular 修改animation属性
时间: 2023-05-20 20:04:38 浏览: 49
可以通过在组件的样式表中使用 @keyframes 关键字来定义动画,然后在组件的 HTML 模板中使用动画名称来触发动画。例如:
在样式表中定义动画:
@keyframes myAnimation {
from { opacity: 0; }
to { opacity: 1; }
}
在组件中使用动画:
@Component({
selector: 'my-component',
template: `
<div [@myAnimation]>Hello, world!</div>
`,
animations: [
trigger('myAnimation', [
transition(':enter', [
animate('1s ease-out', keyframes([
style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
]))
])
])
]
})
export class MyComponent {}
这里的 @myAnimation 是动画名称,它在组件的样式表中定义。在组件的模板中,我们使用 [@myAnimation] 来触发动画。在组件的装饰器中,我们使用 trigger 函数来定义动画,然后在 transition 函数中指定动画的触发条件和动画的效果。在这个例子中,我们使用了一个简单的渐变动画,让元素从透明度为 0 到透明度为 1。