CSS 向下滑动动画 Angular 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47182652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide down animation Angular 4
提问by Nemanja Grabovac
I am trying to animate my page but have the following issue:
I have content div on my page, and a button that opens another div above the content. I would like that div to fade and slide in, and the div bellow to slide down/up as well. I created the animation I wanted for the div above that opens on click, but don't understand what to do with content div, example code bellow:
我正在尝试为我的页面设置动画，但有以下问题：
我的页面上有内容 div，还有一个按钮可以在内容上方打开另一个 div。我希望该 div 淡出并滑入，并且 div 波纹管也向下/向上滑动。我为上面的 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
}))
])
])
]
Should I create some other trigger that will move my content div with the animated one?
我应该创建一些其他触发器来移动我的内容 div 和动画吗？
回答by br.julien
First, create a file where you would define your animations and export them. Just to make it more clear in your app.component.ts
首先，创建一个文件，您将在其中定义动画并导出它们。只是为了让你的 app.component.ts 更清楚
In the following example, I used a max-height of the div that goes from 0px (when it's hidden), to 500px, but you would change that according to what you need.
在下面的示例中，我使用了从 0px（隐藏时）到 500px 的 div 的最大高度，但您可以根据需要进行更改。
This animation uses states (in and out), that will be toggle when we click on the button, which will run the animtion.
这个动画使用状态（输入和输出），当我们点击按钮时会切换，这将运行动画。
animations.ts
动画.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'
}))
]
)])
]),
]
Then in your app.component, we import the animation and create the method that will toggle the animation state.
然后在您的 app.component 中，我们导入动画并创建将切换动画状态的方法。
app.component.ts
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);
}
}
}
And here is how your app.component.htmlwould look like :
这是你的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>
slideInOutrefers to the animation trigger defined in animations.ts
slideInOut指的是 animations.ts 中定义的动画触发器
Here is a StackBlitz example I have created : https://stackblitz.com/edit/angular-muvaqu
这是我创建的 StackBlitz 示例：https://stackblitz.com/edit/angular-muvaqu
Side note : If an error ever occurs and asks you to add BrowserAnimationsModule, just import it in your app.module.ts:
旁注：如果发生错误并要求您添加BrowserAnimationsModule，只需将其导入您的 app.module.ts ：
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [ ..., BrowserAnimationsModule ],
...
})
回答by Mustafa Samar
I quite prefer the wildcard operator when working with height transitions to allow for dynamic height content.
在处理高度转换以允许动态高度内容时，我非常喜欢通配符运算符。
// 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')),
])
usage:
用法：
<div #someDiv [@slideUpDown]="someDiv.state"></div>
somewhere else or in the template you can toggle the state.
在其他地方或模板中，您可以切换状态。
<button (click)="someDiv.state = !someDiv.state"></button>
