@angular/animations#animateChild TypeScript Examples
The following examples show how to use
@angular/animations#animateChild.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: splash.component.ts From bitcoin-s-ts with MIT License | 6 votes |
|
@Component({
selector: 'splash',
templateUrl: './splash.component.html',
animations: [
// the fade-in/fade-out animation.
trigger('fadeOut', [
transition(':leave', [
query(':leave', animateChild(), {optional: true}),
animate(300, style({opacity: 0}))
]),
]),
],
styleUrls: ['./splash.component.scss']
})
export class SplashComponent implements OnInit {
showSplash = false
constructor() { }
ngOnInit(): void {
// Force reset splash key
// localStorage.removeItem(SPLASH_KEY)
const show = localStorage.getItem(SPLASH_KEY) === null
this.showSplash = show
}
dontShowSplashAgainClick() {
console.debug('dontShowSplashAgainClick()')
localStorage.setItem(SPLASH_KEY, '1')
}
onClick() {
this.showSplash = !this.showSplash
}
}
Example #2
| Source File: fade.animation.ts From onchat-web with Apache License 2.0 | 6 votes |
|
fadeRouteAnimation = trigger('fadeRouteAnimation', [
transition('* <=> *', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({ opacity: 0 })
], options),
group([
query(':leave', [
animate('5s ease-in', style({ opacity: 0 }))
], options),
query(':enter', [
animate('5s ease-in', style({ opacity: 1 }))
], options)
]),
])
])
Example #3
| Source File: slide.animation.ts From ng-ant-admin with MIT License | 5 votes |
|
horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
transition(':increment', [
style({position: 'relative'}),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({transform: 'translate3d(100%,0,0)'})
], options),
group([
query(':leave', [
animate('.3s ease-out', style({transform: 'translate3d(-100%,0,0)'}))
], options),
query(':enter', [
animate('.3s ease-out', style({transform: 'none'}))
], options)
]),
]),
transition(':decrement', [
style({position: 'relative'}),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({transform: 'translate3d(-100%,0,0)'})
], options),
group([
query(':leave', [
animate('.3s ease-out', style({transform: 'translate3d(100%,0,0)'}))
], options),
query(':enter', [
animate('.3s ease-out', style({transform: 'none'}))
], options)
])
])
])
Example #4
| Source File: animation.ts From mns with MIT License | 5 votes |
|
slideInAnimation =
trigger('routeAnimations', [
transition('HomePage <=> ProductsPage', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
]),
query(':enter', [
style({ left: '-100%' })
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('300ms ease-out', style({ left: '100%' }))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%' }))
])
]),
query(':enter', animateChild()),
]),
transition('* <=> BlogPage', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
]),
query(':enter', [
style({ left: '-100%' })
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('200ms ease-out', style({ left: '100%' }))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%' }))
])
]),
query(':enter', animateChild()),
]),
transition('* <=> ContactPage', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
]),
query(':enter', [
style({ left: '-100%' })
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('200ms ease-out', style({ left: '100%' }))
]),
query(':enter', [
animate('300ms ease-out', style({ left: '0%' }))
])
]),
query(':enter', animateChild()),
])
])
Example #5
| Source File: slide.animation.ts From onchat-web with Apache License 2.0 | 5 votes |
|
horizontalSlideInRouteAnimation = trigger('horizontalSlideInRouteAnimation', [
transition(':increment', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({ transform: 'translate3d(100%,0,0)' })
], options),
group([
query(':leave', [
animate('.3s ease-out', style({ transform: 'translate3d(-100%,0,0)' }))
], options),
query(':enter', [
animate('.3s ease-out', style({ transform: 'none' }))
], options)
]),
]),
transition(':decrement', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
}),
animateChild(),
], options),
query(':enter', [
style({ transform: 'translate3d(-100%,0,0)' })
], options),
group([
query(':leave', [
animate('.3s ease-out', style({ transform: 'translate3d(100%,0,0)' }))
], options),
query(':enter', [
animate('.3s ease-out', style({ transform: 'none' }))
], options)
])
])
])
