Add transition CSS properties and values

Author: vyorkin

src/CSS.purs

@@ -26,4 +26,4 @@ import CSS.Text.Transform (TextTransform, textTransform) as X
 import CSS.Text.Overflow (TextOverflow, textOverflow) as X
 import CSS.Time (Time(..), ms, sec) as X
 import CSS.Transform (TransformOrigin(..), TransformOriginOffset(..), Transformation(..), offset, offsetBottom, offsetCenter, offsetLeft, offsetRight, offsetTop, rotate, transform, transformOrigin, transforms, translate) as X
-import CSS.Transition (TimingFunction(..), easeOut, linear) as X
+import CSS.Transition (TimingFunction(..), ease, easeIn, easeOut, easeInOut, linear, stepStart, stepEnd, steps, cubicBezier, transition, transitionProperty, transitionProperties, transitionDuration, transitionDurations, transitionTimingFunction, transitionTimingFunctions, transitionDelay, transitionDelays) as X

src/CSS/Transition.purs

@@ -2,19 +2,105 @@ module CSS.Transition where
 
 import Prelude
 
+import CSS.Time (Time)
+import CSS.Common (browsers, none)
 import CSS.String (fromString)
-import CSS.Property (class Val, Value)
+import CSS.Property (class Val, Value, value, (!))
+import CSS.Stylesheet (CSS, prefixed, key)
 
-newtype TimingFunction = TimingFunction Value
+data TimingStepsValue = Start | End
+
+derive instance eqTimingStepsValue :: Eq TimingStepsValue
+derive instance ordTimingStepsValue :: Ord TimingStepsValue
+
+instance valTimingStepsValue :: Val TimingStepsValue where
+  value Start = fromString "start"
+  value End = fromString "end"
+
+data TimingFunction
+  = Ease
+  | EaseIn
+  | EaseOut
+  | EaseInOut
+  | Linear
+  | StepStart
+  | StepEnd
+  | Steps Int TimingStepsValue
+  | CubicBezier Number Number Number Number
 
 derive instance eqTimingFunction :: Eq TimingFunction
 derive instance ordTimingFunction:: Ord TimingFunction
 
 instance valTimingFunction :: Val TimingFunction where
-  value (TimingFunction v) = v
+  value Ease = fromString "ease"
+  value EaseIn = fromString "ease-in"
+  value EaseOut = fromString "ease-out"
+  value EaseInOut = fromString "ease-in-out"
+  value Linear = fromString "linear"
+  value StepStart = fromString "step-start"
+  value StepEnd = fromString "step-end"
+  value (Steps n v) = fromString "steps(" <> value [fromString $ show n, value v] <> fromString ")"
+  value (CubicBezier a b c d) = fromString "cubic-bezier(" <> value (a ! b ! c ! d) <> fromString ")"
 
-linear :: TimingFunction
-linear = TimingFunction $ fromString "linear"
+ease :: TimingFunction
+ease = Ease
+
+easeIn :: TimingFunction
+easeIn = EaseIn
 
 easeOut :: TimingFunction
-easeOut = TimingFunction $ fromString "ease-out"
+easeOut = EaseOut
+
+easeInOut :: TimingFunction
+easeInOut = EaseInOut
+
+linear :: TimingFunction
+linear = Linear
+
+stepStart :: TimingFunction
+stepStart = StepStart
+
+stepEnd :: TimingFunction
+stepEnd = StepEnd
+
+steps :: Int -> TimingStepsValue -> TimingFunction
+steps n = Steps n
+
+cubicBezier :: Number -> Number -> Number -> Number -> TimingFunction
+cubicBezier a b c d = CubicBezier a b c d
+
+start :: TimingStepsValue
+start = Start
+
+end :: TimingStepsValue
+end = End
+
+transition :: String -> Time -> TimingFunction -> Time -> CSS
+transition p d f e = prefixed (browsers <> fromString "transition") (p ! d ! f ! e)
+
+transitionProperty :: String -> CSS
+transitionProperty = key $ fromString "transition-property"
+
+transitionProperties :: Array String -> CSS
+transitionProperties [] = key (fromString "transition-property") (none :: Value)
+transitionProperties xs = key (fromString "transition-property") xs
+
+transitionDuration :: String -> CSS
+transitionDuration = key $ fromString "transition-duration"
+
+transitionDurations :: Array String -> CSS
+transitionDurations [] = key (fromString "transition-duration") (none :: Value)
+transitionDurations xs = key (fromString "transition-duration") xs
+
+transitionTimingFunction :: TimingFunction -> CSS
+transitionTimingFunction = key $ fromString "transition-timing-function"
+
+transitionTimingFunctions :: Array TimingFunction -> CSS
+transitionTimingFunctions [] = key (fromString "transition-timing-function") (none :: Value)
+transitionTimingFunctions xs = key (fromString "transition-timing-function") xs
+
+transitionDelay :: Time -> CSS
+transitionDelay = key $ fromString "transition-delay"
+
+transitionDelays :: Array Time -> CSS
+transitionDelays = key $ fromString "transition-delay"

src/CSS/VerticalAlign.purs

@@ -19,18 +19,18 @@ data VerticalAlign
   | Initial
   | Unset
 
-instance valVerticalAlign :: Val (VerticalAlign) where
-  value (Baseline) = fromString "baseline"
-  value (Sub) = fromString "sub"
-  value (Super) = fromString "super"
-  value (TextTop) = fromString "text-top"
-  value (TextBottom) = fromString "text-bottom"
-  value (Middle) = fromString "middle"
-  value (Top) = fromString "top"
-  value (Bottom) = fromString "bottom"
-  value (Inherit) = fromString "inherit"
-  value (Initial) = fromString "initial"
-  value (Unset) = fromString "unset"
+instance valVerticalAlign :: Val VerticalAlign where
+  value Baseline = fromString "baseline"
+  value Sub = fromString "sub"
+  value Super = fromString "super"
+  value TextTop = fromString "text-top"
+  value TextBottom = fromString "text-bottom"
+  value Middle = fromString "middle"
+  value Top = fromString "top"
+  value Bottom = fromString "bottom"
+  value Inherit = fromString "inherit"
+  value Initial = fromString "initial"
+  value Unset = fromString "unset"
 
 instance inheritVerticalAlign :: Inherit (VerticalAlign) where
   inherit = Inherit

test/Main.purs

@@ -4,7 +4,7 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Exception (error, throwException)
-import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, transform)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, transform, transition, easeInOut, ms)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
 import CSS.Transform as Transform
@@ -137,6 +137,10 @@ nestedNodesWithEmptyParent = render do
   fromString "#parent" ? do
     fromString "#child" ? display block
 
+transition1 :: Rendered
+transition1 = render do
+  transition "background-color" (ms 1.0) easeInOut (ms 0.0)
+
 assertEqual :: forall a. Eq a => Show a => a -> a -> Effect Unit
 assertEqual x y = unless (x == y) <<< throwException <<< error $ "Assertion failed: " <> show x <> " /= " <> show y
 
@@ -185,3 +189,4 @@ main = do
   renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)"
   renderedInline scaleTransform2 `assertEqual` Just "transform: scale(0.2, 0.8)"
 
+  renderedInline transition1 `assertEqual` Just "-webkit-transition: background-color 1.0ms ease-in-out 0.0ms; -moz-transition: background-color 1.0ms ease-in-out 0.0ms; -ms-transition: background-color 1.0ms ease-in-out 0.0ms; -o-transition: background-color 1.0ms ease-in-out 0.0ms; transition: background-color 1.0ms ease-in-out 0.0ms"