Css 向下滑动动画角度4
我正在尝试设置页面动画,但出现以下问题:Css 向下滑动动画角度4,css,angular,angular-animations,Css,Angular,Angular Animations,我正在尝试设置页面动画,但出现以下问题: 我的页面上有content div,还有一个按钮可以在内容上方打开另一个div。我希望那个div淡入并滑入,div的吼声也能滑下/滑上。我为上面的div创建了我想要的动画,它在单击时打开,但不知道如何处理content div,下面是示例代码: <div class="wrapper"> <button (click)="animated = !animated"></button> <div *ngIf
我的页面上有content div,还有一个按钮可以在内容上方打开另一个div。我希望那个div淡入并滑入,div的吼声也能滑下/滑上。我为上面的div创建了我想要的动画,它在单击时打开,但不知道如何处理content 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是动画的
这里是内容部
打字稿:
动画:[
触发器('slideInutanimation'[
状态('*',样式({
})),
转换(“:输入”[
风格({
转换:“translateY(-10%)”,
不透明度:0
}),
动画('.5s缓进缓出',风格({
转换:“translateY(0)”,
不透明度:1
}))
]),
过渡(“:离开”[
动画('.5s缓进缓出',风格({
转换:“translateY(-10%)”,
不透明度:0
}))
])
])
]
我是否应该创建一些其他触发器,将我的content div与动画一起移动?首先,创建一个文件,在其中定义动画并导出它们。只是为了让你的app.component.ts更清楚 在下面的示例中,我使用了div的最大高度,从0px(隐藏时)到500px,但您可以根据需要进行更改 此动画使用状态(in和out),当我们单击按钮时,将切换状态,该按钮将运行动画 动画。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'
}))
]
)])
]),
]
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);
}
}
}
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 }))]),
]),
],
})
.box {
overflow: hidden;
}
然后在app.component中,我们导入动画并创建将切换动画状态的方法
应用程序组件.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'
}))
]
)])
]),
]
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);
}
}
}
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 }))]),
]),
],
})
.box {
overflow: hidden;
}
下面是您的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>
在处理高度转换时,我比较喜欢使用通配符操作符,以允许动态高度内容
// 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 { 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'
}))
]
)])
]),
]
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);
}
}
}
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 }))]),
]),
],
})
.box {
overflow: hidden;
}
my component.html
<div @slideDownUp *ngIf="isShowing" class="box">
I am the content of the div!
</div>
请参阅其他解决方案哇,这真的有助于通过我们的网站共享一个通用的动画库。谢谢你。我们最终制作了这些工厂函数,这样我们就可以对每个动画进行稍微不同的配置。是的,实际上工厂函数使其可重用。你能告诉我你在谈论哪个图书馆吗?很好的解决方案。谢谢