mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-10-26 09:56:12 +03:00
Fix rendering styles as important
or not
This commit is contained in:
parent
173deedebb
commit
34791dbeec
@ -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
|
||||
|
||||
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user