6eb1cfaea1
* timers refactored into a timer service from the app.component * settings service now provides observable setting changes * slideshow is now working * commit-tracker style changed to dark look, colored lines were removed * dashboard menu order changed * slide/committracker is now animated
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
// import the required animation functions from the angular animations module
|
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
|
|
export const slideInOutAnimation =
|
|
// trigger name for attaching this animation to an element using the [@triggerName] syntax
|
|
trigger('slideInOutAnimation', [
|
|
|
|
// end state styles for route container (host)
|
|
state('*', style({
|
|
// the view covers the whole screen with a semi tranparent background
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
})),
|
|
|
|
// route 'enter' transition
|
|
transition(':enter', [
|
|
// styles at start of transition
|
|
style({
|
|
// start with the content positioned off the right of the screen,
|
|
// -400% is required instead of -100% because the negative position adds to the width of the element
|
|
transform: 'translateX(100%)'
|
|
}),
|
|
|
|
// animation and styles at end of transition
|
|
animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({
|
|
// transition the right position to 0 which slides the content into view
|
|
transform: 'translateX(0)'
|
|
}))
|
|
]),
|
|
|
|
// route 'leave' transition
|
|
transition(':leave', [
|
|
// animation and styles at end of transition
|
|
animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({
|
|
// transition the right position to -400% which slides the content out of view
|
|
transform: 'translateX(-100%)'
|
|
}))
|
|
])
|
|
]);
|