use hardware accelerated transforms (#28)

Author: andrewMacmurray

src/Internal/Transform.elm

@@ -108,9 +108,7 @@ combine transform combined =
 
 render : Combined -> String
 render combined =
-    [ render_ translate_ combined.xy
-    , render_ translateX_ combined.x
-    , render_ translateY_ combined.y
+    [ translate_ combined
     , render_ scale_ combined.scale
     , render_ rotate_ combined.rotate
     ]
@@ -125,42 +123,64 @@ render_ f =
 
 scale_ : ( Float, Float ) -> String
 scale_ ( x_, y_ ) =
-    join [ "scale(", String.fromFloat x_, ",", String.fromFloat y_, ")" ]
+    String.concat [ "scale3d(", String.fromFloat x_, ",", String.fromFloat y_, ",1)" ]
+
+
+translate_ : Combined -> String
+translate_ combined =
+    case ( combined.xy, combined.x, combined.y ) of
+        ( Just ( x_, y_ ), _, _ ) ->
+            translateXY_ x_ y_
+
+        ( Nothing, Just x_, Nothing ) ->
+            translateX_ x_
+
+        ( Nothing, Nothing, Just y_ ) ->
+            translateY_ y_
+
+        ( Nothing, Just x_, Just y_ ) ->
+            translateXY_ x_ y_
+
+        ( Nothing, Nothing, Nothing ) ->
+            ""
+
+
+translateXY_ : Float -> Float -> String
+translateXY_ x_ y_ =
+    String.concat [ "translate3d(", px x_, ",", px y_, ",0)" ]
 
 
 translateX_ : Float -> String
 translateX_ n =
-    join [ "translateX(", px n, ")" ]
+    String.concat [ "translate3d(", px n, ",0,0)" ]
 
 
 translateY_ : Float -> String
 translateY_ n =
-    join [ "translateY(", px n, ")" ]
-
-
-translate_ : ( Float, Float ) -> String
-translate_ ( x_, y_ ) =
-    join [ "translate(", px x_, ",", px y_, ")" ]
+    String.concat [ "translate3d(0,", px n, ",0)" ]
 
 
 rotate_ : Float -> String
 rotate_ n =
-    join [ "rotate(", deg n, ")" ]
-
-
-join : List String -> String
-join =
-    String.join ""
+    String.concat [ "rotate3d(0,0,1,", deg n, ")" ]
 
 
 px : Float -> String
 px n =
-    String.fromFloat n ++ "px"
+    if n == 0 then
+        "0"
+
+    else
+        String.fromFloat n ++ "px"
 
 
 deg : Float -> String
 deg n =
-    String.fromFloat n ++ "deg"
+    if n == 0 then
+        "0"
+
+    else
+        String.fromFloat n ++ "deg"
 
 
 

tests/FromToTest.elm

@@ -32,8 +32,8 @@ suite =
                     [ P.opacity 1, P.x 50 ]
                     [ P.opacity 0.5, P.x 100 ]
                     |> Expect.keyframes
-                        [ "0% { opacity: 1; transform: translateX(50px); }"
-                        , "100% { opacity: 0.5; transform: translateX(100px); }"
+                        [ "0% { opacity: 1; transform: translate3d(50px,0,0); }"
+                        , "100% { opacity: 0.5; transform: translate3d(100px,0,0); }"
                         ]
         , test "rendering class properties" <|
             \_ ->

tests/TransformTest.elm

@@ -16,7 +16,15 @@ suite =
                 , Transform.rotate 5
                 ]
                     |> Transform.toString
-                    |> Expect.equal "translateX(5px) translateY(5px) scale(5,5) rotate(5deg)"
+                    |> Expect.equal "translate3d(5px,5px,0) scale3d(5,5,1) rotate3d(0,0,1,5deg)"
+        , test "XY transforms are prioritised over separate X and Y transforms" <|
+            \_ ->
+                [ Transform.xy 10 15
+                , Transform.x 2
+                , Transform.y 4
+                ]
+                    |> Transform.toString
+                    |> Expect.equal "translate3d(10px,15px,0)"
         , test "The last property wins if duplicated" <|
             \_ ->
                 [ Transform.rotate 5
@@ -25,5 +33,5 @@ suite =
                 , Transform.x 10
                 ]
                     |> Transform.toString
-                    |> Expect.equal "translateX(10px) rotate(12deg)"
+                    |> Expect.equal "translate3d(10px,0,0) rotate3d(0,0,1,12deg)"
         ]