Skip to content

A transition library followed the Elm Architecture, for Hydux.

License

Notifications You must be signed in to change notification settings

hydux/hydux-transitions

Repository files navigation

hydux-transitions

npm npm

A transition library followed The Elm Architecture, for Hydux.

Install

yarn add hydux-transitions hydux # npm i hydux-transitions hydux

Online Examples

Usage

import Transitions, { Units } from 'hydux-transitions'
const actions = {
  timeline: Transitions.actions,
}

const state = {
  timeline: Transitions.init([{
    translateX: Units.px(200),
    scale: 2,
    duration: Units.ms(1000),
  }, {
    translateX: Units.px(100),
    scale: 1,
    duration: Units.ms(2000),
  }, {
    translateX: Units.px(200),
    scale: 2,
    duration: Units.ms(3000),
  }], {
    initFrame: {
      translateX: Units.px(100),
    }
  }),
  slide: Slide.init(),
}

const view = (state, actions) => {
  return (
    <main>
      <button onClick={actions.timeline.start}>Start</button>
      <button onClick={actions.timeline.reset}>Reset</button>
      <button onClick={actions.timeline.end}>End</button>
      <p style={pStyle}>
        <div
          style={{
            width: '20px',
            height: '20px',
            background: 'red',
            ...state.timeline.style,
          }}
          className={state.timeline.className}
        />
      </p>
    </main>
  )
}

app({
  init: () => state,
  actions,
  view
})

License

MIT

About

A transition library followed the Elm Architecture, for Hydux.

Resources

License

Stars

Watchers

Forks

Packages

No packages published