[英]Angular Animate Fade-In, Fade-Out Component
I have the following code that I'd like to apply to a component when entering and leaving:我有以下代码,我想在进入和离开时应用于组件:
animations: [
trigger('visibilityChanged', [
state('in', style({opacity: 1})),
transition('void => *', [
style({opacity: 1}),
animate(100)
]),
transition('* => void', [
animate(100, style({opacity: 0}))
])
])
]
This is nearly identical to the example that the Angular docs provide but for some reason, when going from the void => *
state, there is no fade-in.这与Angular 文档提供的示例几乎相同,但出于某种原因,从void => *
状态开始时,没有淡入。
I've also tried this in there live examples page with no success.我也在现场示例页面中尝试过这个,但没有成功。
Any ideas?有什么想法吗?
animations: [
trigger('visibilityChanged', [
state('in', style({
opacity: 0
})),
state('out', style({
opacity: 1
})),
transition('in => out', animate('100ms ease-in')),
transition('out => in', animate('100ms ease-out'))
])
]
I suggest you checkout ng-animate because it has lots of animations out of the box which are easily implemented, but if want code without library that fits your purpose then use this:我建议你检查ng-animate因为它有很多开箱即用的动画,很容易实现,但是如果想要没有适合你目的的库的代码,那么使用这个:
import { trigger, animate, transition, style, state } from '@angular/animations';
export const simpleFadeAnimation = trigger('simpleFadeAnimation', [
// the "in" style determines the "resting" state of the element when it is visible.
state('in', style({opacity: 1})),
// fade in when created. this could also be written as transition('void => *')
transition(':enter', [
style({opacity: 0}),
animate(1000 )
]),
// fade out when destroyed. this could also be written as transition('void => *')
transition(':leave',
animate(1000, style({opacity: 0})))
]);
Or if you want to trasition by "X" axis, use this:或者,如果您想通过“X”轴进行 trasition,请使用以下命令:
import { trigger, animate, transition, style, group, query } from '@angular/animations';
export const slideInAnimation = trigger('slideInAnimation', [
// Transition between any two states
transition('* <=> *', [
// Events to apply
// Defined style and animation function to apply
// Config object with optional set to true to handle when element not yet added to the DOM
query(':enter, :leave', style({ position: 'fixed', width: '100%', zIndex: 2 }), { optional: true }),
// group block executes in parallel
group([
query(':enter', [
style({ transform: 'translateX(100%)' }),
animate('0.7s ease-out', style({ transform: 'translateX(0%)' }))
], { optional: true }),
query(':leave', [
style({ transform: 'translateX(0%)' }),
animate('0.7s ease-out', style({ transform: 'translateX(-100%)' }))
], { optional: true })
])
])
]);
After that you need to import it inside @Component decorator in .ts file.之后,您需要将其导入到.ts文件中的@Component装饰器中。 And if you want to share it trough all components inside you app then use this:如果您想通过应用程序内的所有组件共享它,请使用以下命令:
<div [@slideInAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.