adds adaptor for elm-css (#25)

Author: andrewMacmurray

README.md

@@ -101,7 +101,7 @@ So you can use your own version of `elm/svg` and `mdgriffith/elm-ui` (or whateve
 
 ## Use with SVG
 
-A working example: https://ellie-app.com/cZTwtp3TsdSa1
+A working example: https://ellie-app.com/fYCGytWFDD7a1
 
 So we can create animated `Svg`s, create an animated wrapper function using `Svg.Attributes.class` and `Simple.Animation.Animated.svg`
 
@@ -180,7 +180,7 @@ this lets you wrap regular `Element`s to create animated ones:
 
 ```elm
 animatedEl : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
-ael =
+animatedEl =
     animatedUi Element.el
 
 
@@ -232,6 +232,87 @@ animatedUi =
         }
 ```
 
+## Use with elm-css
+
+So we can create animated versions of `elm-css` `div`s, `p`s or any other `Styled` element, create an animated wrapper using `Simple.Animation.Animated.elmCss` and the following:
+
+```elm
+animatedElmCssNode =
+    Animated.elmCss
+        { text = Html.Styled.text
+        , node = Html.Styled.node
+        , class = Html.Styled.Attributes.class
+        }
+```
+
+this lets you wrap regular `Html.Styled` nodes to create animated ones:
+
+```elm
+animatedDiv : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
+animatedDiv =
+    animatedElmCssNode Html.Styled.div
+
+
+animatedLi : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
+animatedLi =
+    animatedElmCssNode Html.Styled.li
+```
+
+Here's an animated square using `elm-css`
+
+```elm
+import Css
+import Html exposing (Html)
+import Html.Styled as Styled
+import Simple.Animation as Animation exposing (Animation)
+import Simple.Animation.Animated
+import Simple.Animation.Property as P
+import Html.Styled.Attributes as StyledAttributes
+
+
+mySquare : Html msg
+mySquare =
+    Styled.toUnstyled
+        (animatedDiv hover
+            []
+            [ Styled.div
+                [ StyledAttributes.css
+                    [ Css.width (Css.px 50)
+                    , Css.height (Css.px 50)
+                    , Css.backgroundColor (Css.hex "ff0000")
+                    ]
+                ]
+                []
+            ]
+        )
+
+
+hover : Animation
+hover =
+    Animation.steps
+        { startAt = [ P.y 0 ]
+        , options = [ Animation.loop, Animation.easeInOutQuad ]
+        }
+        [ Animation.step 500 [ P.y 20 ]
+        , Animation.step 650 [ P.y 0 ]
+        ]
+
+
+animatedDiv : Animation -> List (Styled.Attribute msg) -> List (Styled.Html msg) -> Styled.Html msg
+animatedDiv =
+    animatedElmCssNode Styled.div
+
+
+animatedElmCssNode =
+    Simple.Animation.Animated.elmCss
+        { text = Styled.text
+        , node = Styled.node
+        , class = StyledAttributes.class
+        }
+
+
+```
+
 ## Use a Custom Renderer
 
 In case you want to completely customise how to render animations you can use the low level `Simple.Animation.Animated.custom` - which gives you access to the raw animation `stylesheet` and `class` name that will apply the animation.

examples/elm.json

@@ -12,14 +12,16 @@
             "elm/html": "1.0.0",
             "elm/svg": "1.0.1",
             "elm-community/typed-svg": "6.0.0",
-            "mdgriffith/elm-ui": "1.1.8"
+            "mdgriffith/elm-ui": "1.1.8",
+            "rtfeldman/elm-css": "17.0.1"
         },
         "indirect": {
             "avh4/elm-color": "1.0.0",
             "elm/json": "1.1.3",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
-            "elm/virtual-dom": "1.0.2"
+            "elm/virtual-dom": "1.0.2",
+            "rtfeldman/elm-hex": "1.0.0"
         }
     },
     "test-dependencies": {

examples/src/Examples/Animations/Renderers.elm

@@ -1,8 +1,11 @@
 module Examples.Animations.Renderers exposing (examples)
 
+import Css
 import Element exposing (Element)
 import Html exposing (Html)
 import Html.Attributes
+import Html.Styled as Styled
+import Html.Styled.Attributes
 import Simple.Animation as Animation exposing (Animation)
 import Simple.Animation.Animated as Animated
 import Simple.Animation.Property as P
@@ -46,6 +49,25 @@ htmlExample =
 
 
 
+-- Elm CSS
+
+
+elmCssExample : Html msg
+elmCssExample =
+    Styled.toUnstyled
+        (Animated.animatedElmCssDiv flash
+            [ Html.Styled.Attributes.class "text"
+            , Html.Styled.Attributes.css
+                [ Css.fontWeight Css.bold
+                , Css.border3 (Css.px 2) Css.solid (Css.hex "#123123")
+                ]
+            ]
+            [ Styled.text "I'm animating!"
+            ]
+        )
+
+
+
 -- Svg
 
 
@@ -127,6 +149,7 @@ examples : Element msg -> Element msg
 examples =
     groups
         [ group "With HTML" (html htmlExample)
+        , group "With Elm CSS" (html elmCssExample)
         , group "With SVG" (html svgExample)
         , group "With Typed SVG" (html typedSvgExample)
         ]

examples/src/Utils/Animated.elm

@@ -1,12 +1,15 @@
 module Utils.Animated exposing
-    ( circle
+    ( animatedElmCssDiv
+    , circle
     , el
     , g
     , path
     , typedSvgG
     )
 
 import Element exposing (Element)
+import Html.Styled as Styled
+import Html.Styled.Attributes
 import Simple.Animation exposing (Animation)
 import Simple.Animation.Animated as Animated
 import Svg exposing (Svg)
@@ -40,6 +43,29 @@ animatedUi =
 
 
 
+-- Elm CSS
+
+
+animatedElmCssDiv : Animation -> List (Styled.Attribute msg) -> List (Styled.Html msg) -> Styled.Html msg
+animatedElmCssDiv =
+    animatedElmCssNode Styled.div
+
+
+animatedElmCssNode :
+    (List (Styled.Attribute msg) -> List (Styled.Html msg) -> Styled.Html msg)
+    -> Animation
+    -> List (Styled.Attribute msg)
+    -> List (Styled.Html msg)
+    -> Styled.Html msg
+animatedElmCssNode =
+    Animated.elmCss
+        { text = Styled.text
+        , node = Styled.node
+        , class = Html.Styled.Attributes.class
+        }
+
+
+
 -- Svg