From 34791dbeecdb21268b3ba71ef260fed9768c3b63 Mon Sep 17 00:00:00 2001 From: Matthew Griffith Date: Tue, 30 Apr 2024 16:15:48 -0400 Subject: [PATCH] Fix rendering styles as `important` or not --- src/Internal/Teleport.elm | 16 +++-- src/Ui/Anim.elm | 12 +--- tests-rendering/visual/Anim.elm | 112 +++++++++++++++++++++----------- 3 files changed, 86 insertions(+), 54 deletions(-) diff --git a/src/Internal/Teleport.elm b/src/Internal/Teleport.elm index f4252c9..b80ff88 100644 --- a/src/Internal/Teleport.elm +++ b/src/Internal/Teleport.elm @@ -35,8 +35,16 @@ persistentId group instance = -- ENCODER -encodeCss : String -> String -> Bool -> Animator.Css -> Encode.Value -encodeCss trigger keyframesHash asImportant css = +encodeCss : String -> String -> Animator.Css -> Encode.Value +encodeCss trigger keyframesHash css = + let + -- If this is a transition (meanining no keyframes) + -- Then we need to render the props as !important + -- If there are keyframes, then the props can't be !important + -- or else they'll clobber the animation + noKeyframes = + String.isEmpty css.keyframes + in Encode.object [ ( "type", Encode.string "css" ) , ( "trigger", Encode.string trigger ) @@ -44,7 +52,7 @@ encodeCss trigger keyframesHash asImportant css = , ( "keyframesHash", Encode.string keyframesHash ) , ( "keyframes", Encode.string css.keyframes ) , ( "transition", Encode.string css.transition ) - , ( "props", Encode.list (encodeProp asImportant) css.props ) + , ( "props", Encode.list (encodeProp noKeyframes) css.props ) ] @@ -74,7 +82,7 @@ encodeParentTrigger trigger identifierClass = encodeChildReaction : String -> String -> String -> Animator.Css -> Encode.Value encodeChildReaction triggerPseudoclass identifierClass keyframeHash css = - encodeCss triggerPseudoclass keyframeHash False css + encodeCss triggerPseudoclass keyframeHash css diff --git a/src/Ui/Anim.elm b/src/Ui/Anim.elm index 0050269..659d563 100644 --- a/src/Ui/Anim.elm +++ b/src/Ui/Anim.elm @@ -324,20 +324,10 @@ toAttr trigger incomingCss = props , data = css - |> Teleport.encodeCss (triggerPsuedo trigger) incomingCss.hash (asImportant trigger) + |> Teleport.encodeCss (triggerPsuedo trigger) incomingCss.hash } -asImportant : Trigger -> Bool -asImportant trigger = - case trigger of - OnRender -> - False - - _ -> - True - - transitionWithTrigger : Trigger -> Duration -> List Animated -> Attribute msg transitionWithTrigger trigger dur attrs = Animator.css diff --git a/tests-rendering/visual/Anim.elm b/tests-rendering/visual/Anim.elm index 708691f..34505c7 100644 --- a/tests-rendering/visual/Anim.elm +++ b/tests-rendering/visual/Anim.elm @@ -115,7 +115,6 @@ view model = , Ui.spacing 100 ] [ Theme.h1 "Row" - , Theme.description "Hello" , Theme.h1 "Hovering animations are independent" , Ui.row [ Ui.spacing 20 ] [ box @@ -351,7 +350,7 @@ view model = [ Ui.Anim.rotation 0 ] , Ui.Anim.step (Ui.Anim.ms 2000) - [ Ui.Anim.rotation 1 + [ Ui.Anim.rotation 0.5 ] ] ] @@ -379,7 +378,7 @@ view model = [ Ui.Anim.rotation 1 |> Ui.Anim.withTransition (Ui.Anim.spring - { wobble = 1 + { wobble = 0.5 , quickness = 0 } ) @@ -388,43 +387,78 @@ view model = ] ] ] + , Ui.row [ Ui.spacing 20 ] + (List.map + (\wobble -> + mini + [ Ui.Anim.keyframes + [ Ui.Anim.loop + [ Ui.Anim.set + [ Ui.Anim.rotation 0 + ] + , Ui.Anim.step (Ui.Anim.ms 1000) + [ Ui.Anim.rotation 0.5 + |> Ui.Anim.withTransition + (Ui.Anim.spring + { wobble = wobble + , quickness = 0 + } + ) + ] + ] - -- , Ui.row [ Ui.spacing 20 ] - -- (List.map - -- (\wobble -> - -- mini - -- [ Ui.Anim.keyframes - -- [ Ui.Anim.loop - -- [ Ui.Anim.set - -- [ Ui.Anim.rotation 0 - -- ] - -- , Ui.Anim.step (Ui.Anim.ms 2000) - -- [ Ui.Anim.rotation 1 - -- |> Ui.Anim.withTransition - -- (Ui.Anim.spring - -- { wobble = wobble - -- , quickness = 0 - -- } - -- ) - -- ] - -- ] - -- -- |> Ui.Anim.withStepTransition Ui.Anim.wobble 0.2 - -- ] - -- ] - -- ) - -- [ 0 - -- , 0.1 - -- , 0.2 - -- , 0.3 - -- , 0.4 - -- , 0.5 - -- , 0.6 - -- , 0.7 - -- , 0.8 - -- , 0.9 - -- , 1 - -- ] - -- ) + -- |> Ui.Anim.withStepTransition Ui.Anim.wobble 0.2 + ] + ] + ) + [ 0 + , 0.1 + , 0.2 + , 0.3 + , 0.4 + , 0.5 + , 0.6 + , 0.7 + , 0.8 + , 0.9 + , 1 + ] + ) + , Ui.row [ Ui.spacing 20 ] + (List.map + (\wobble -> + mini + [ Ui.Anim.keyframes + [ Ui.Anim.loop + [ Ui.Anim.set + [ Ui.Anim.rotation 0 + ] + , Ui.Anim.step (Ui.Anim.ms 1000) + [ Ui.Anim.rotation 0.5 + |> Ui.Anim.withTransition + (Ui.Anim.spring + { wobble = wobble + , quickness = 1 + } + ) + ] + ] + ] + ] + ) + [ 0 + , 0.1 + , 0.2 + , 0.3 + , 0.4 + , 0.5 + , 0.6 + , 0.7 + , 0.8 + , 0.9 + , 1 + ] + ) ] )