Skip to content

Instantly share code, notes, and snippets.

@jwx

jwx/index.html

Last active May 13, 2022 09:14
Show Gist options
  • Save jwx/5aaaac09bd99dd7a48ca5f0d86afcad4 to your computer and use it in GitHub Desktop.
Save jwx/5aaaac09bd99dd7a48ca5f0d86afcad4 to your computer and use it in GitHub Desktop.
Download ZIP
au2-animation-test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.ts.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>
Raw
package.json
{
"dependencies": {
"aurelia": "latest",
"@aurelia/router": "latest"
}
}
Raw
src\animation-hooks.ts
import { lifecycleHooks } from '@aurelia/runtime-html';
@lifecycleHooks()
export class AnimationHooks {
// Only routing hooks are yet supported
//public created(vm, controller): void {
// vm.element = controller.host;
//}
public load(vm, _params, _instruction, navigation) {
vm.backwards = navigation.navigation.back;
}
public unload(vm, _instruction, navigation) {
vm.backwards = navigation.navigation.back;
}
// Only routing hooks are yet supported
//public attaching() {
// return slideIn(vm.element, 750, vm.backwards ? 'left' : 'right');
//}
// Only routing hooks are yet supported
//public detaching() {
// return slideOut(vm.element, 750, vm.backwards ? 'right' : 'left');
//}
}
Raw
src\animations.ts
export function promiseAnimation(element: Element, animation: any, duration: number) {
let resolve;
const promise = new Promise(r => { resolve = r; });
const anim = element.animate(animation, duration);
anim.onfinish = () => resolve();
return promise;
}
export function slideIn(element: Element, duration: number, from: 'left' | 'right' = 'right') {
return promiseAnimation(element, { transform: [`translateX(${from === 'left' ? '-' : ''}100%)`, 'translateX(0)'] }, duration);
}
export function slideOut(element: Element, duration: number, to: 'left' | 'right' = 'left') {
return promiseAnimation(element, { transform: ['translateX(0)', `translateX(${to === 'left' ? '-' : ''}100%)`] }, duration);
}
Raw
src\main.ts
import Aurelia from 'aurelia';
import { RouterConfiguration } from '@aurelia/router';
import { AnimationHooks } from './animation-hooks';
import { MyApp } from './my-app';
Aurelia
.register(RouterConfiguration.customize({ swapOrder: 'detach-attach-simultaneously', }))
.register(AnimationHooks)
.app(MyApp)
.start();
Raw
src\my-app.css
a {
background-color: #ccc;
margin: 0;
padding: 10px;
display: inline-block;
text-decoration: none;
}
a:hover {
background-color: #eee;
}
a.active {
background-color: gold;
}
au-viewport {
display: grid;
}
au-viewport > * {
display: block;
position: relative;
grid-column: 1;
grid-row: 1;
}
Raw
src\my-app.html
<!--
Try to create a paired css/scss/sass/less file like my-app.scss.
It will be automatically imported based on convention.
-->
<!--
There is no bundler config you can change in Dumber Gist to
turn on shadow DOM.
But you can turn shadow DOM on by adding a meta tag in every
html template:
<use-shadow-dom>
-->
<import from="./one"></import>
<import from="./two"></import>
<h1>${message}!</h1>
<a load="one">One</a><a load="two">Two</a>
<au-viewport></au-viewport>
Raw
src\my-app.ts
export class MyApp {
public message: string = 'Hello Aurelia 2!';
}
Raw
src\one.ts
import { slideIn, slideOut } from './animations';
export class One {
// Once support is there, this would also move to animation-hooks.ts
public created(controller): void {
this.element = controller.host;
}
//public load(_params, _instruction, navigation) {
// this.backwards = navigation.navigation.back;
//}
// After the next router release, this method can also be moved to animation-hooks.ts
public unload(_instruction, navigation) {
this.backwards = navigation.navigation.back;
}
// Once support is there, this would also move to animation-hooks.ts
public attaching() {
return slideIn(this.element, 750, this.backwards ? 'left' : 'right');
}
// Once support is there, this would also move to animation-hooks.ts
public detaching() {
return slideOut(this.element, 750, this.backwards ? 'right' : 'left');
}
}
Raw
src\two.ts
import { slideIn, slideOut } from './animations';
export class Two {
// Once support is there, this would also move to animation-hooks.ts
public created(controller): void {
this.element = controller.host;
}
//public load(_params, _instruction, navigation) {
// this.backwards = navigation.navigation.back;
//}
// After the next router release, this method can also be moved to animation-hooks.ts
public unload(_instruction, navigation) {
this.backwards = navigation.navigation.back;
}
// Once support is there, this would also move to animation-hooks.ts
public attaching() {
debugger;
return slideIn(this.element, 750, this.backwards ? 'left' : 'right');
}
// Once support is there, this would also move to animation-hooks.ts
public detaching() {
console.log('two detaching backwards', this.backwards);
return slideOut(this.element, 750, this.backwards ? 'right' : 'left');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment