Skip to content

Conditionally render using css classes during the different stages of a transition

License

Notifications You must be signed in to change notification settings

nanahs/elm-transitions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

elm-transition

This package aims to solve the headache involved in having css transitions in your elm application by moving the state needed for them into a custom element and keeping your models simpler

Installation

Add the elm and js dependencies to your project

elm install nanahs/elm-transitions
npm install --save-dev elm-transitions

Add the custom element to your js entrypoint

...

import { Elm } from "./src/Main.elm";
import Transitions from "./vendor/Transitions.js";

const root = document.querySelector("#app div");
const app = Elm.Main.init({ node: root });

Transitions.start(app);

...

Example

import Transitions

myView
    |> Transitions.make
        { isShowing = model.isShowing
        , enter = "transition-opacity duration-500"
        , enterFrom = "opacity-0"
        , enterTo = "opacity-100"
        , onEnter = Just TransitionIncrease
        , leave = "transition-opacity duration-500"
        , leaveFrom = "opacity-100"
        , leaveTo = "opacity-0"
        , onLeave = Just TransitionIncrease
        }
    |> Transitions.view

TODO

  • Add code examples without tailwindcss
  • Change to config pattern, everything is required and won't transition properly without them

Inspsired by Headless UI transition

https://headlessui.dev/react/transition

About

Conditionally render using css classes during the different stages of a transition

Resources

License

Stars

Watchers

Forks

Packages

No packages published