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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
