From 477ebd94aab781ef1f8f50e6f95415470829d5f4 Mon Sep 17 00:00:00 2001 From: Tom Scheler Date: Tue, 2 Apr 2024 00:00:54 +0200 Subject: [PATCH] feat: add animation timing function property --- src/Css.elm | 10 ++++ src/Css/Internal.elm | 105 +++++++++++++++++++++++++++++++++++++++- src/Css/Transitions.elm | 69 +++++--------------------- 3 files changed, 127 insertions(+), 57 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index c3812b72..1bb5c39a 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -66,6 +66,7 @@ module Css exposing , animationDelay , animationDuration , animationIterationCount + , animationTimingFunction , FontSize, ColorValue, ColorStop, IntOrAuto , thin, thick, blink ) @@ -462,6 +463,7 @@ functions let you define custom properties and selectors, respectively. @docs animationDelay @docs animationDuration @docs animationIterationCount +@docs animationTimingFunction # Types @@ -2865,6 +2867,14 @@ animationIterationCount arg = prop1 "animation-iteration-count" arg +{-| An [`animation-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) +) property. +-} +animationTimingFunction : Css.Internal.TimingFunction -> Style +animationTimingFunction arg = + prop1 "animation-timing-function" { value = Css.Internal.timingFunctionToString arg } + + {-| Sets [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) with a series of transform-functions. If an empty list is provided, the CSS output will be `none`, as if to state directly that the set of transforms diff --git a/src/Css/Internal.elm b/src/Css/Internal.elm index 6e1c9b2b..8e5a423d 100644 --- a/src/Css/Internal.elm +++ b/src/Css/Internal.elm @@ -1,4 +1,4 @@ -module Css.Internal exposing (AnimationProperty(..), ColorValue, ExplicitLength, IncompatibleUnits(..), Length, LengthOrAutoOrCoverOrContain, compileKeyframes, getOverloadedProperty, lengthConverter, lengthForOverloadedProperty) +module Css.Internal exposing (AnimationProperty(..), ColorValue, ExplicitLength, IncompatibleUnits(..), Length, LengthOrAutoOrCoverOrContain, TimingFunction, compileKeyframes, cubicBezier, ease, easeIn, easeInOut, easeOut, getOverloadedProperty, lengthConverter, lengthForOverloadedProperty, linear, stepEnd, stepStart, timingFunctionToString) import Css.Preprocess as Preprocess exposing (Style) import Css.String @@ -53,6 +53,109 @@ type AnimationProperty = Property String +type TimingFunction + = Ease + | Linear + | EaseIn + | EaseOut + | EaseInOut + | StepStart + | StepEnd + | CubicBezier Float Float Float Float + + +{-| CSS ease timing function +-} +ease : TimingFunction +ease = + Ease + + +{-| CSS linear timing function +-} +linear : TimingFunction +linear = + Linear + + +{-| CSS easeIn timing function +-} +easeIn : TimingFunction +easeIn = + EaseIn + + +{-| CSS easeOut timing function +-} +easeOut : TimingFunction +easeOut = + EaseOut + + +{-| CSS easeInOut timing function +-} +easeInOut : TimingFunction +easeInOut = + EaseInOut + + +{-| CSS stepStart timing function +-} +stepStart : TimingFunction +stepStart = + StepStart + + +{-| CSS stepEnd timing function +-} +stepEnd : TimingFunction +stepEnd = + StepEnd + + +{-| CSS cubicBezier timing function +-} +cubicBezier : Float -> Float -> Float -> Float -> TimingFunction +cubicBezier f1 f2 f3 f4 = + CubicBezier f1 f2 f3 f4 + + +timingFunctionToString : TimingFunction -> String +timingFunctionToString tf = + case tf of + Ease -> + "ease" + + Linear -> + "linear" + + EaseIn -> + "ease-in" + + EaseOut -> + "ease-out" + + EaseInOut -> + "ease-in-out" + + StepStart -> + "step-start" + + StepEnd -> + "step-end" + + CubicBezier float float2 float3 float4 -> + "cubic-bezier(" + ++ String.fromFloat float + ++ " , " + ++ String.fromFloat float2 + ++ " , " + ++ String.fromFloat float3 + ++ " , " + ++ String.fromFloat float4 + ++ ")" + + {-| Used only for compiling keyframes. This does not compile to valid standalone CSS, but rather to the body of an @keyframes at-rule. diff --git a/src/Css/Transitions.elm b/src/Css/Transitions.elm index d8dc7219..4be1ced5 100644 --- a/src/Css/Transitions.elm +++ b/src/Css/Transitions.elm @@ -65,73 +65,66 @@ An example of this would be the [`background3`](#background3), [`background2`](# -} import Css +import Css.Internal - -type TimingFunction - = Ease - | Linear - | EaseIn - | EaseOut - | EaseInOut - | StepStart - | StepEnd - | CubicBezier Float Float Float Float +type alias TimingFunction + = Css.Internal.TimingFunction {-| CSS ease timing function -} ease : TimingFunction ease = - Ease + Css.Internal.ease {-| CSS linear timing function -} linear : TimingFunction linear = - Linear + Css.Internal.linear {-| CSS easeIn timing function -} easeIn : TimingFunction easeIn = - EaseIn + Css.Internal.easeIn {-| CSS easeOut timing function -} easeOut : TimingFunction easeOut = - EaseOut + Css.Internal.easeOut {-| CSS easeInOut timing function -} easeInOut : TimingFunction easeInOut = - EaseInOut + Css.Internal.easeInOut {-| CSS stepStart timing function -} stepStart : TimingFunction stepStart = - StepStart + Css.Internal.stepStart {-| CSS stepEnd timing function -} stepEnd : TimingFunction stepEnd = - StepEnd + Css.Internal.stepEnd {-| CSS cubicBezier timing function -} cubicBezier : Float -> Float -> Float -> Float -> TimingFunction -cubicBezier f1 f2 f3 f4 = - CubicBezier f1 f2 f3 f4 +cubicBezier = + Css.Internal.cubicBezier {-| This describes all of the aspects of a [CSS transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition), which will then be @@ -2860,42 +2853,6 @@ timeToString time = String.fromFloat time ++ "ms" -timingFunctionToString : TimingFunction -> String -timingFunctionToString tf = - case tf of - Ease -> - "ease" - - Linear -> - "linear" - - EaseIn -> - "ease-in" - - EaseOut -> - "ease-out" - - EaseInOut -> - "ease-in-out" - - StepStart -> - "step-start" - - StepEnd -> - "step-end" - - CubicBezier float float2 float3 float4 -> - "cubic-bezier(" - ++ String.fromFloat float - ++ " , " - ++ String.fromFloat float2 - ++ " , " - ++ String.fromFloat float3 - ++ " , " - ++ String.fromFloat float4 - ++ ")" - - {-| This function is used to batch up a list of supplied transitions that have been created (using the property functions listed below) and then produce a [`Css.Style`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#Style). This can then be used with other functions (such as [`Html.Styled.Attributes.css`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes#css)) to add the desired transitions to elements / classes as required. -} @@ -2914,7 +2871,7 @@ transition options = |> Maybe.withDefault "" ) ++ " " - ++ (Maybe.map timingFunctionToString timing + ++ (Maybe.map Css.Internal.timingFunctionToString timing |> Maybe.withDefault "" ) ++ ","