Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added animations for show/hide #20

Merged
merged 5 commits into from
Jul 31, 2017
Merged

Added animations for show/hide #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d47bc8b
Added animations for show/hide
dabide Apr 6, 2017
e5273b0
Show/hide animations now only when anim-show/anim-hide present
dabide Apr 6, 2017
ab2ac11
Fixed bug causing existing animations to be removed
dabide Apr 6, 2017
1ede56c
Reverted unnecessary changes
dabide Apr 6, 2017
16fdcd6
Reverted more unnecessary stuff
dabide Apr 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"aurelia-metadata": "^1.0.0",
"aurelia-pal": "^1.0.0",
"aurelia-templating": "^1.0.0",
"aurelia-templating-resources": "^1.0.0",
"velocity-animate": "^1.2.3"
},
"devDependencies": {
Expand Down
38 changes: 33 additions & 5 deletions src/animator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import velocity from 'velocity-animate';
import 'velocity-animate/velocity.ui';
import { animationEvent } from 'aurelia-templating';
import { aureliaHideClassName} from 'aurelia-templating-resources/aurelia-hide-style';
import {DOM, PLATFORM} from 'aurelia-pal';

/**
Expand Down Expand Up @@ -31,7 +32,9 @@ export class VelocityAnimator {
*/
effects: any = {
':enter': 'fadeIn',
':leave': 'fadeOut'
':leave': 'fadeOut',
':show': 'fadeIn',
':hide': 'fadeOut'
};

/**
Expand Down Expand Up @@ -239,8 +242,13 @@ export class VelocityAnimator {
* @returns Resolved when the animation is done
*/
removeClass(element: HTMLElement, className: string): Promise<boolean> {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't the function return type be Promise<boolean|VelocityAnimator> ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm no TypeScript expert. However, _runElementAnimation() returns Promise<any>, so then it could just as well be Promise<any> for removeClass(). But wouldn't that violate the Animator interface definition, which has Promise<bool>? Should I perhaps add a .then() that returns a boolean on success?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The then approach is the way to go 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just make sure to add a catch as well in case something goes wrong

element.classList.remove(className);
return Promise.resolve(false);
if (className === aureliaHideClassName && element.getAttribute('anim-show')) {
element.classList.remove(className);
return this.stop(element, true)._runElementAnimation(element, ':show', undefined, 'show');
} else {
element.classList.remove(className);
return Promise.resolve(false);
}
}

/**
Expand All @@ -250,8 +258,14 @@ export class VelocityAnimator {
* @returns Resolved when the animation is done
*/
addClass(element: HTMLElement, className: string): Promise<boolean> {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that enter/leave do accept an options attribute, is that not needed for remove/add?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it is not used when templating calls enter/leave.

element.classList.add(className);
return Promise.resolve(false);
if (className === aureliaHideClassName && element.getAttribute('anim-hide')) {
return this.stop(element, true)._runElementAnimation(element, ':hide', undefined, 'hide').then(() => {
element.classList.add(className);
});
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the else block is not really needed since the if contains a return

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quite true. :-)

element.classList.add(className);
return Promise.resolve(false);
}
}

/**
Expand Down Expand Up @@ -327,6 +341,18 @@ export class VelocityAnimator {
attrOpts = leave.options;
break;

case ':show':
let show = element.animations.show;
name = show.properties;
attrOpts = show.options;
break;

case ':hide':
let hide = element.animations.hide;
name = hide.properties;
attrOpts = hide.options;
break;

default:
if (!this.effects[this.resolveEffectAlias(name)]) throw new Error(`${name} animation is not supported.`);
}
Expand All @@ -351,6 +377,8 @@ export class VelocityAnimator {
el.animations = {};
el.animations.enter = this._parseAttributeValue(el.getAttribute('anim-enter')) || this.enterAnimation;
el.animations.leave = this._parseAttributeValue(el.getAttribute('anim-leave')) || this.leaveAnimation;
el.animations.show = this._parseAttributeValue(el.getAttribute('anim-show')) || undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if the animation for leave/show is not defined shouldn't we use defaults like for enter/leave? See line 22/23

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially did that, but reconsidered. Then enter/leave effects are opt-in by adding au-animate. If hide/show should have a default animation, I think we would also have to add a check for that attribute. (Or perhaps accept empty anim-leave and anim-show attributes.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok let's keep it the way it is

el.animations.hide = this._parseAttributeValue(el.getAttribute('anim-hide')) || undefined;
}
}

Expand Down