在Angular中,你可以使用Angular动画模块来实现元素的缩放和移动效果。下面是一个示例代码,展示了如何在缩小上方元素的同时移动下方元素。
首先,你需要在你的Angular应用中导入@angular/animations
模块,以及trigger
、state
、style
和transition
函数。
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition } from '@angular/animations';
@Component({
selector: 'app-animation-example',
template: `
Upper Element
Lower Element
`,
animations: [
trigger('scaleUp', [
state('small', style({
transform: 'scale(1)'
})),
state('large', style({
transform: 'scale(0.5)'
})),
transition('small => large', [
style({
transform: 'scale(1)'
}),
animate('300ms ease-in')
]),
transition('large => small', [
style({
transform: 'scale(0.5)'
}),
animate('300ms ease-out')
])
]),
trigger('slide', [
state('small', style({
transform: 'translateY(0)'
})),
state('large', style({
transform: 'translateY(100px)'
})),
transition('small => large', [
style({
transform: 'translateY(0)'
}),
animate('300ms ease-in')
]),
transition('large => small', [
style({
transform: 'translateY(100px)'
}),
animate('300ms ease-out')
])
])
]
})
export class AnimationExampleComponent implements OnInit {
currentState: string = 'small';
constructor() { }
toggle() {
this.currentState = this.currentState === 'small' ? 'large' : 'small';
}
animationDone(event: any) {
console.log('Animation done: ', event);
}
ngOnInit(): void {
}
}
在上面的示例中,我们定义了两个动画触发器:scaleUp
和slide
。scaleUp
触发器用于缩放元素,slide
触发器用于移动元素。我们在state
中定义了两个状态:small
和large
。style
函数用于定义每个状态的样式。
在模板中,我们使用[@scaleUp]
和[@slide]
绑定到两个不同的元素,并在点击按钮时切换状态。当状态切换时,会触发相应的动画效果。
你可以根据需要自定义动画的属性、样式和过渡时间。在动画完成时,你可以使用(@scaleUp.done)
语法监听动画完成事件,并调用相应的方法进行处理。
希望这个示例能对你有所帮助!