/
Chaining.elm
105 lines (89 loc) · 2.55 KB
/
Chaining.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
module Main exposing (..)
import Html.App as Html
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Style
import Style.Properties exposing (..)
import Time exposing (Time, second)
import AnimationFrame
import Color exposing (rgba)
type alias Model =
{ style : Style.Animation
}
type Msg
= ChangeColor
| Animate Time
update : Msg -> Model -> ( Model, Cmd Msg )
update action model =
case action of
ChangeColor ->
let
style =
Style.animate
|>
Style.to
[ BackgroundColor (rgba 100 100 100 1.0)
]
|>
Style.andThen -- create a new keyframe
|>
Style.duration (1 * second)
|>
Style.to
[ BackgroundColor (rgba 178 201 14 1.0)
]
|>
Style.andThen
|>
Style.to
[ BackgroundColor (rgba 58 40 69 1.0)
]
|>
Style.on model.style
in
( { model | style = style }
, Cmd.none
)
Animate time ->
( { model
| style = Style.tick time model.style
}
, Cmd.none
)
view : Model -> Html Msg
view model =
let
triggerStyle =
[ ( "position", "relative" )
, ( "margin", "200px auto" )
, ( "width", "250px" )
, ( "height", "250px" )
, ( "text-align", "center" )
, ( "line-height", "250px" )
, ( "color", "white" )
, ( "cursor", "pointer" )
]
in
div
[ onClick ChangeColor
, style (triggerStyle ++ Style.render model.style)
]
[ text "Click to Change Color" ]
init : ( Model, Cmd Msg )
init =
( { style =
Style.init [ BackgroundColor (rgba 58 40 69 1.0) ]
}
, Cmd.none
)
subscriptions : Model -> Sub Msg
subscriptions model =
AnimationFrame.times Animate
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}