mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Update; not gonna fork

pull/186/head
Cory LaViska 2020-08-10 10:45:46 -04:00
rodzic 9b5ac44934
commit f2a33ab070
5 zmienionych plików z 55 dodań i 64 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
docs/components/animation.md
Wyświetl plik

@ -2,7 +2,7 @@
[component-header:sl-animate]
Animate...
Animate elements declaratively using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Select from over 500 baked-in presets or roll your own with custom [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats).
```html preview
<sl-animation

1
docs/getting-started/overview.md
Wyświetl plik

@ -119,7 +119,6 @@ Special thanks to the following projects and individuals that helped make Shoela
- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
- Illustrations are courtesy of [unDraw](https://undraw.co/)
- Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
- The animate component was forked from [animatable-component](https://github.com/proyecto26/animatable-component)
- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
## Previous Versions

38
src/components.d.ts vendored
Wyświetl plik

@ -153,7 +153,7 @@ export namespace Components {
*/
"autoPlay"?: boolean;
/**
* Clears all `KeyframeEffects` caused by this animation and aborts its playback.
* Cancels the animation.
*/
"cancel": () => Promise<void>;
/**
@ -185,19 +185,19 @@ export namespace Components {
*/
"duration": number;
/**
* The rate of the animation's change over time.
* The easing effect to use.
*/
"easing"?: string;
"easing": string;
/**
* The number of milliseconds to delay after the end of an animation.
*/
"endDelay": number;
/**
* Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
* Defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationStart or after animation's end time.
*/
"fill"?: FillMode;
/**
* Sets the current playback time to the end of the animation corresponding to the current playback direction.
* Sets the playback time to the end of the animation corresponding to the playback direction.
*/
"finish": () => Promise<void>;
/**
@ -227,11 +227,11 @@ export namespace Components {
/**
* Describes at what point in the iteration the animation should start.
*/
"iterationStart"?: number;
"iterationStart": number;
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
*/
"iterations": any;
"iterations": number;
/**
* Keyframes of the animation.
*/
@ -245,25 +245,21 @@ export namespace Components {
*/
"options"?: KeyframeAnimationOptions;
/**
* Suspends playback of the animation.
* Pauses the animation.
*/
"pause": () => Promise<void>;
/**
* Starts or resumes playing of an animation.
* Starts or resumes the animation.
*/
"play": () => Promise<void>;
/**
* Sets the playback rate of the animation.
*/
"playbackRate"?: number;
/**
* Reverses the playback direction, meaning the animation ends at its beginning.
*/
"reverse": () => Promise<void>;
"playbackRate": number;
/**
* Sets the scheduled time when an animation's playback should begin.
*/
"startTime"?: number;
"startTime": number;
}
interface SlAvatar {
/**
@ -1562,7 +1558,7 @@ declare namespace LocalJSX {
*/
"duration"?: number;
/**
* The rate of the animation's change over time.
* The easing effect to use.
*/
"easing"?: string;
/**
@ -1570,7 +1566,7 @@ declare namespace LocalJSX {
*/
"endDelay"?: number;
/**
* Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
* Defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationStart or after animation's end time.
*/
"fill"?: FillMode;
/**
@ -1584,7 +1580,7 @@ declare namespace LocalJSX {
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make it repeat for as long as the element exists.
*/
"iterations"?: any;
"iterations"?: number;
/**
* Keyframes of the animation.
*/
@ -1594,15 +1590,15 @@ declare namespace LocalJSX {
*/
"name"?: AnimationsType;
/**
* This event is sent when the animation is cancelled.
* Emitted when the animation is canceled.
*/
"onSlCancel"?: (event: CustomEvent<HTMLElement>) => void;
/**
* This event is sent when the animation finishes playing.
* Emitted when the animation finishes.
*/
"onSlFinish"?: (event: CustomEvent<HTMLElement>) => void;
/**
* This event is sent when the animation is going to play.
* Emitted when the animation starts playing.
*/
"onSlStart"?: (event: CustomEvent<HTMLElement>) => void;
/**

58
src/components/animation/animation.tsx
Wyświetl plik

@ -3,6 +3,16 @@ import { IAnimatableComponent } from './models/animatable';
import { AnimationsType, getKeyFramesByAnimation } from './animations';
import { AnimationManager } from './manager';
//
// TODO:
//
// - combine manager and remove utils
// - reorder watchers and methods
// - support case-insensitive "infinity" in `iterations`
// - document and provide CDN link for the Web Animations polyfill (which browsers actually require it?) https://github.com/web-animations/web-animations-js
// - clean up animation and easing exports
//
/**
* @since 2.0
* @status experimental
@ -42,7 +52,7 @@ export class Animate implements IAnimatableComponent {
@Prop({ mutable: true }) duration = 0;
/** Direction of the animation. */
@Prop({ mutable: true }) direction?: PlaybackDirection;
@Prop({ mutable: true }) direction?: PlaybackDirection = 'normal';
/**
* Determines how values are combined between this animation and other, separate animations that do not specify their
@ -50,23 +60,23 @@ export class Animate implements IAnimatableComponent {
*/
@Prop({ mutable: true }) composite: CompositeOperation = 'replace';
/** The rate of the animation's change over time. */
@Prop({ mutable: true }) easing?: string;
/** The easing effect to use. */
@Prop({ mutable: true }) easing = 'none';
/**
* Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"),
* retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
* Defines how the element to which the animation is applied should look when the animation sequence is not actively
* running, such as before the time specified by iterationStart or after animation's end time.
*/
@Prop({ mutable: true }) fill?: FillMode;
@Prop({ mutable: true }) fill?: FillMode = 'none';
/**
* The number of times the animation should repeat. Defaults to `1`, and can also take a value of `Infinity` to make
* it repeat for as long as the element exists.
*/
@Prop({ mutable: true }) iterations: any = 1;
@Prop({ mutable: true }) iterations = 1;
/** Describes at what point in the iteration the animation should start. */
@Prop({ mutable: true }) iterationStart?: number;
@Prop({ mutable: true }) iterationStart = 0;
/** Determines how values build from iteration to iteration in this animation. */
@Prop({ mutable: true }) iterationComposite?: IterationCompositeOperation;
@ -78,13 +88,13 @@ export class Animate implements IAnimatableComponent {
@Prop() currentTime = 0;
/** Sets the playback rate of the animation. */
@Prop() playbackRate?: number;
@Prop() playbackRate = 1;
/** Sets the scheduled time when an animation's playback should begin. */
@Prop() startTime?: number;
@Prop() startTime = 0;
@Watch('name')
handleAnimationChange(name: AnimationsType) {
handleNameChange(name: AnimationsType) {
this.keyFrames = getKeyFramesByAnimation(name);
}
@ -138,45 +148,39 @@ export class Animate implements IAnimatableComponent {
return Promise.resolve(this.manager.currentAnimation.playState);
}
/** This event is sent when the animation is going to play. */
@Event({ bubbles: false }) slStart!: EventEmitter<HTMLElement>;
/** Emitted when the animation starts playing. */
@Event() slStart!: EventEmitter<HTMLElement>;
/** This event is sent when the animation finishes playing. */
@Event({ bubbles: false }) slFinish!: EventEmitter<HTMLElement>;
/** Emitted when the animation finishes. */
@Event() slFinish!: EventEmitter<HTMLElement>;
/** This event is sent when the animation is cancelled. */
@Event({ bubbles: false }) slCancel!: EventEmitter<HTMLElement>;
/** Emitted when the animation is canceled. */
@Event() slCancel!: EventEmitter<HTMLElement>;
/** Clears all `KeyframeEffects` caused by this animation and aborts its playback. */
/** Cancels the animation. */
@Method()
async cancel(): Promise<void> {
this.manager.currentAnimation.cancel();
}
/** Sets the current playback time to the end of the animation corresponding to the current playback direction. */
/** Sets the playback time to the end of the animation corresponding to the playback direction. */
@Method()
async finish(): Promise<void> {
this.manager.currentAnimation.finish();
}
/** Suspends playback of the animation. */
/** Pauses the animation. */
@Method()
async pause(): Promise<void> {
this.manager.currentAnimation.pause();
}
/** Starts or resumes playing of an animation. */
/** Starts or resumes the animation. */
@Method()
async play(): Promise<void> {
this.manager.playAnimation();
}
/** Reverses the playback direction, meaning the animation ends at its beginning. */
@Method()
async reverse(): Promise<void> {
this.manager.currentAnimation.reverse();
}
/** Clear the current animation */
@Method()
async clear(): Promise<void> {

20
src/components/animation/manager.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { IAnimatable } from './models/animatable';
import { KEYFRAMES } from './animations';
import { EasingType, EASING_FUNCTIONS } from './easing/easing';
import { IAnimatable } from './models/animatable';
function createAnimation(element: HTMLElement, context: IAnimatable): Animation {
const newKeyFrames = context.keyFrames || (context.name && KEYFRAMES[context.name]) || [];
@ -13,15 +13,7 @@ function createAnimation(element: HTMLElement, context: IAnimatable): Animation
return newAnimation;
}
export function clearPropsWithOptions(context: IAnimatable, options: KeyframeAnimationOptions) {
for (const key in options) {
if (options.hasOwnProperty(key)) {
context[key] = undefined;
}
}
}
export function getAnimationOptions(context: IAnimatable): KeyframeAnimationOptions {
function getAnimationOptions(context: IAnimatable): KeyframeAnimationOptions {
const animationOptions: KeyframeAnimationOptions = context.options || {};
if (context.delay !== undefined) animationOptions.delay = context.delay;
if (context.duration !== undefined) animationOptions.duration = context.duration;
@ -60,16 +52,16 @@ export class AnimationManager {
const { element, state } = this;
const newAnimation = createAnimation(element, state);
newAnimation.addEventListener('slFinish', this.onFinishAnimation);
newAnimation.addEventListener('slCancel', this.onCancelAnimation);
newAnimation.addEventListener('finish', this.onFinishAnimation);
newAnimation.addEventListener('cancel', this.onCancelAnimation);
return (this.name = newAnimation);
}
clearAnimation() {
if (this.name === null) return;
this.name.removeEventListener('slFinish', this.onFinishAnimation);
this.name.removeEventListener('slCancel', this.onCancelAnimation);
this.name.removeEventListener('finish', this.onFinishAnimation);
this.name.removeEventListener('cancel', this.onCancelAnimation);
this.name = null;
}