Skip to content

Instantly share code, notes, and snippets.

@bitflower
Forked from jdnichollsc/animatable-component.html
Created October 28, 2019 07:32
Show Gist options
  • Save bitflower/16c88c3c2a58799099c894a78703dfbe to your computer and use it in GitHub Desktop.
Save bitflower/16c88c3c2a58799099c894a78703dfbe to your computer and use it in GitHub Desktop.
Animatable Components using Higher Order Component (HOC) with StencilJS πŸ™Œ
import { Component, h, Element, Prop, Host, Event, EventEmitter } from '@stencil/core';
@Component({
tag: 'animatable-component'
})
export class AnimatableComponent {
@Element() el!: HTMLElement;
@Prop() keyFrames: Keyframe[]
@Prop() options: KeyframeAnimationOptions
@Event() finish: EventEmitter;
animateComponent() {
const element = this.el.querySelectorAll(':first-child')[0];
const animation = element.animate(this.keyFrames, this.options)
animation.play();
animation.onfinish = () => this.finish.emit(element)
}
componentWillLoad() {
this.animateComponent()
}
componentDidUpdate() {
this.animateComponent()
}
render() {
return <Host>
<slot />
</Host>
}
}
import { Component, h } from '@stencil/core';
import {
SendMessageButton,
createAnimatableComponent,
keyFramesSendMessage,
optionsSendMessage,
} from './utils'
const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton)
@Component({
tag: 'my-animated-component'
})
export class MyAnimatedComponent {
render() {
return (
<AnimatableSendMessageButton
keyFrames={keyFramesSendMessage}
options={optionsSendMessage}
onClick={() => alert('Eureka')}
/>
)
}
}
export function createAnimatableComponent (
WrappedComponent: any
) {
return (props) => {
const { keyFrames, options, onFinish, ...rest } = props
return (
<animatable-component
keyFrames={keyFrames}
options={options}
onFinish={onFinish}
>
<WrappedComponent {...rest} />
</animatable-component>
)
}
};
export const SendMessageButton = (props) => {
return (
<ion-fab-button {...props}>
<ion-icon name='send' />
</ion-fab-button>
)
}
export const keyFramesSendMessage: Keyframe[] = [
{
opacity: '0',
transform: 'rotate(0deg)'
},
{
opacity: '1',
transform: 'rotate(360deg)'
}
]
export const optionsSendMessage: KeyframeAnimationOptions = {
duration: 500,
easing: 'ease-in-out'
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment