下滑动画Angular 4
Slide down animation Angular 4
我正在尝试为我的页面制作动画,但遇到以下问题:
我的页面上有内容 div,还有一个按钮可以在内容上方打开另一个 div。我希望 div 淡入淡出并滑入,div 波纹管也滑动 down/up。我为上面的 div 创建了我想要的动画,点击后打开,但不明白如何处理内容 div,示例代码如下:
<div class="wrapper">
<button (click)="animated = !animated"></button>
<div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [
state('*', style({
})),
transition(':enter', [
style({
transform: 'translateY(-10%)',
opacity: 0
}),
animate('.5s ease-in-out', style({
transform: 'translateY(0)',
opacity: 1
}))
]),
transition(':leave', [
animate('.5s ease-in-out', style({
transform: 'translateY(-10%)',
opacity: 0
}))
])
])
]
我是否应该创建一些其他触发器来将我的内容 div 与动画内容一起移动?
首先,创建一个文件,您可以在其中定义动画并导出它们。只是为了让您的 app.component.ts
更清楚
在下面的示例中,我使用了 div 的最大高度,从 0px(隐藏时)到 500px,但您可以根据需要更改它。
此动画使用状态(输入和输出),当我们单击按钮时会切换,这将 运行 动画。
animations.ts
import { trigger, state, style, transition,
animate, group, query, stagger, keyframes
} from '@angular/animations';
export const SlideInOutAnimation = [
trigger('slideInOut', [
state('in', style({
'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
})),
state('out', style({
'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
})),
transition('in => out', [group([
animate('400ms ease-in-out', style({
'opacity': '0'
})),
animate('600ms ease-in-out', style({
'max-height': '0px'
})),
animate('700ms ease-in-out', style({
'visibility': 'hidden'
}))
]
)]),
transition('out => in', [group([
animate('1ms ease-in-out', style({
'visibility': 'visible'
})),
animate('600ms ease-in-out', style({
'max-height': '500px'
})),
animate('800ms ease-in-out', style({
'opacity': '1'
}))
]
)])
]),
]
然后在您的 app.component 中,我们导入动画并创建切换动画状态的方法。
app.component.ts
import { SlideInOutAnimation } from './animations';
@Component({
...
animations: [SlideInOutAnimation]
})
export class AppComponent {
animationState = 'in';
...
toggleShowDiv(divName: string) {
if (divName === 'divA') {
console.log(this.animationState);
this.animationState = this.animationState === 'out' ? 'in' : 'out';
console.log(this.animationState);
}
}
}
这是你的 app.component.html 的样子:
<div class="wrapper">
<button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
<div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
slideInOut指的是animations.ts
中定义的动画触发器
这是我创建的 StackBlitz 示例:https://stackblitz.com/edit/angular-muvaqu
旁注:如果发生错误并要求您添加 BrowserAnimationsModule,只需将其导入 app.module.ts:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [ ..., BrowserAnimationsModule ],
...
})
在处理高度转换以允许动态高度内容时,我更喜欢使用通配符。
// Bind to true/false states via 0 and 1 values
trigger('slideUpDown', [
state('0', style({ 'max-height': '*', opacity: 1 })),
state('1', style({ 'max-height': '0px', opacity: 0 })),
transition(':enter', animate('400ms ease-in-out')),
transition('* => *', animate('400ms ease-in-out')),
])
用法:
<div #someDiv [@slideUpDown]="someDiv.state"></div>
您可以在其他地方或模板中切换状态。
<button (click)="someDiv.state = !someDiv.state"></button>
这是在 angular 2+
中实现向下滑动动画的简单方法
my-component.ts
import { animate, style, transition, trigger } from '@angular/animations';
@Component({
animations: [
trigger('slideDownUp', [
transition(':enter', [style({ height: 0 }), animate(500)]),
transition(':leave', [animate(500, style({ height: 0 }))]),
]),
],
})
my-component.html
<div @slideDownUp *ngIf="isShowing" class="box">
I am the content of the div!
</div>
my-component.scss
.box {
overflow: hidden;
}
我正在尝试为我的页面制作动画,但遇到以下问题:
我的页面上有内容 div,还有一个按钮可以在内容上方打开另一个 div。我希望 div 淡入淡出并滑入,div 波纹管也滑动 down/up。我为上面的 div 创建了我想要的动画,点击后打开,但不明白如何处理内容 div,示例代码如下:
<div class="wrapper">
<button (click)="animated = !animated"></button>
<div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [
state('*', style({
})),
transition(':enter', [
style({
transform: 'translateY(-10%)',
opacity: 0
}),
animate('.5s ease-in-out', style({
transform: 'translateY(0)',
opacity: 1
}))
]),
transition(':leave', [
animate('.5s ease-in-out', style({
transform: 'translateY(-10%)',
opacity: 0
}))
])
])
]
我是否应该创建一些其他触发器来将我的内容 div 与动画内容一起移动?
首先,创建一个文件,您可以在其中定义动画并导出它们。只是为了让您的 app.component.ts
更清楚在下面的示例中,我使用了 div 的最大高度,从 0px(隐藏时)到 500px,但您可以根据需要更改它。
此动画使用状态(输入和输出),当我们单击按钮时会切换,这将 运行 动画。
animations.ts
import { trigger, state, style, transition,
animate, group, query, stagger, keyframes
} from '@angular/animations';
export const SlideInOutAnimation = [
trigger('slideInOut', [
state('in', style({
'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
})),
state('out', style({
'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
})),
transition('in => out', [group([
animate('400ms ease-in-out', style({
'opacity': '0'
})),
animate('600ms ease-in-out', style({
'max-height': '0px'
})),
animate('700ms ease-in-out', style({
'visibility': 'hidden'
}))
]
)]),
transition('out => in', [group([
animate('1ms ease-in-out', style({
'visibility': 'visible'
})),
animate('600ms ease-in-out', style({
'max-height': '500px'
})),
animate('800ms ease-in-out', style({
'opacity': '1'
}))
]
)])
]),
]
然后在您的 app.component 中,我们导入动画并创建切换动画状态的方法。
app.component.ts
import { SlideInOutAnimation } from './animations';
@Component({
...
animations: [SlideInOutAnimation]
})
export class AppComponent {
animationState = 'in';
...
toggleShowDiv(divName: string) {
if (divName === 'divA') {
console.log(this.animationState);
this.animationState = this.animationState === 'out' ? 'in' : 'out';
console.log(this.animationState);
}
}
}
这是你的 app.component.html 的样子:
<div class="wrapper">
<button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
<div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
slideInOut指的是animations.ts
中定义的动画触发器这是我创建的 StackBlitz 示例:https://stackblitz.com/edit/angular-muvaqu
旁注:如果发生错误并要求您添加 BrowserAnimationsModule,只需将其导入 app.module.ts:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [ ..., BrowserAnimationsModule ],
...
})
在处理高度转换以允许动态高度内容时,我更喜欢使用通配符。
// Bind to true/false states via 0 and 1 values
trigger('slideUpDown', [
state('0', style({ 'max-height': '*', opacity: 1 })),
state('1', style({ 'max-height': '0px', opacity: 0 })),
transition(':enter', animate('400ms ease-in-out')),
transition('* => *', animate('400ms ease-in-out')),
])
用法:
<div #someDiv [@slideUpDown]="someDiv.state"></div>
您可以在其他地方或模板中切换状态。
<button (click)="someDiv.state = !someDiv.state"></button>
这是在 angular 2+
中实现向下滑动动画的简单方法my-component.ts
import { animate, style, transition, trigger } from '@angular/animations';
@Component({
animations: [
trigger('slideDownUp', [
transition(':enter', [style({ height: 0 }), animate(500)]),
transition(':leave', [animate(500, style({ height: 0 }))]),
]),
],
})
my-component.html
<div @slideDownUp *ngIf="isShowing" class="box">
I am the content of the div!
</div>
my-component.scss
.box {
overflow: hidden;
}