mdgriffith/elm-ui
1
1
Fork 0
mirror of https://github.com/mdgriffith/elm-ui.git synced 2024-10-26 09:56:12 +03:00
Code Issues Projects Releases Wiki Activity

Fix rendering styles as important or not

Browse Source
This commit is contained in:
Matthew Griffith 2024-04-30 16:15:48 -04:00
parent 173deedebb
commit 34791dbeec
3 changed files with 86 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Internal/Teleport.elm
View File

@ -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

12
src/Ui/Anim.elm
View File

@ -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

112
tests-rendering/visual/Anim.elm
View File

@ -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
]
)
]
)