Op vrijdag 14 oktober 2016 21:21:03 UTC+2 schreef Aislan de Sousa Maia:
>
> Some repo to see this more advanced animations with CSS + Elm ??
>
Sorry, no repo (have yet to learn more about github).
But let's say, you want to animate adding an item to a list, and do stuff
after the animation ended, the gist of this would be something like:
type alias Item =
{ content : String
, id : Int
}
type AnimState = Static | IsHidden Int | IsEntering Int
type Msg = AddItem Item | DisplayedHidden Int Time | TransitionEnded Int
type Model =
{ items : List Item
, animState : AnimState
}
update msg model =
case msg of
AddItem item ->
{ model
| items = model.items ++ [ item ]
, animState = IsHidden item.id
} ! []
DisplayedHidden itemId _ ->
{ model
| animState = IsEntering itemId
} ! []
TransitionEnded itemId ->
{ model
| animState = Static
} ! []
view model =
ul []
List.map (itemView model) model.items
itemView model item =
let
itemAttributes =
case model.animState of
Static ->
[ class "static" ]
IsHidden itemId ->
if item.id == itemId then
[ class "hidden" ]
else
[ class "static" ]
IsEntering itemId ->
if item.id == itemId then
[ class "entering", onTransitionEnd (TransitionEnded itemId) ]
else
[ class "static" ]
in
li
itemAttributes
[ text item.content ]
onTransitionEnd msg =
Html.Events.on "transitionend" (Json.succeed msg)
subscriptions model =
case model.animState of
IsHidden itemId ->
AnimationFrame.times (DisplayedHidden itemId)
_ ->
Sub.none
In your css, you would have the following classes for the item:
- ".hidden" that does NOT use "display: none", but some other
attributes (e.g. opacity, height, or transform: translate) to make the item
invisible.
- ".entering", which includes a "transition: xx ..ms" to do the
animation from .hidden to .entering
- ".static", which has the styling for after the animation.
Some remarks here:
- you need a subscription for AnimationFrame, to ensure that elm has at
least rendered once on screen before the next class is applied.
- the transitionend (at least in Chrome) fires each time one element of
the transition has ended, so if your css-transition has two animating
elements (e.g. opacity and position), the transitionend will fire as soon
as the first transition has ended
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
