Closed rolojf closed 3 years ago
Hi Rolando, that's awesome! I wonder if we could add a built in helper to the Animated
module that wraps what you've done above:
import Html.Styled as Htmls
import Html.Styled.Attributes as Attr
import Simple.Animation exposing (Animation)
import Simple.Animation.Animated as Animated
animatedStyleNode :
(List (Htmls.Attribute msg) -> List (Htmls.Html msg) -> Htmls.Html msg)
-> Animation
-> List (Htmls.Attribute msg)
-> List (Htmls.Html msg)
-> Htmls.Html msg
animatedStyleNode =
Animated.elmCss
{ text = Htmls.text
, node = Htmls.node
, class = Attr.class
}
Yes!, I think I would be a great addition to the package.
Just some thoughts:
Maybe it's a good idea to think again if the class is needed at all.
I understand that with other implementations, the css it's linked to the class of this node.
But in elm-css
all the style added is directly through an inline style element.
Therefore, maybe it is not needed. All additional styling is already provided with other tailwind classes.
or ¿am i missing something? Hope I explained myself (not native English speaker)
Great!
I'm not super familiar with the internals of elm-css so it's definitely worth a try - the stylesheet Animated.custom
returns expects there to be a dom node with a specific class name so a keyframes animation can be applied:
@keyframes anim-1000infinite-y-0-y-5 {
0% { transform: translateY(0px) }
100% { transform: translateY(5px) }
}
.anim-1000infinite-y-0-y-5 {
animation-name: anim-1000infinite-y-0-y-5;
animation-iteration-count: infinite;
animation-duration: 1000ms;
}
Happy for you to make a PR if you have time?
Sure, this weekend I hope to have it ready.
First of all, thanks for this Andrew.
I want to share some code that I think It's working for me. Please consider (after making any changes you think necessary) making it available for others on the wiki, or readme or any where you see fit. I know you give concise instructions about this, in the documentation. But having this code available, might save some time and make it easy to adopt this package.
The code is about using
Simple.Animation.Animated.custom
with the packages:rffeldman/elm-css
andmatheus23/elm-default-tailwind-modules
.Here is it:
I think this way of styling (with tailwindcss) is gaining momentum. A am also very interested in seeing what changes you would make to the code.
Regards,