Skip to content

Add keyframes #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jul 28, 2020
Merged

Add keyframes #8

merged 2 commits into from
Jul 28, 2020

Conversation

i-am-the-slime
Copy link
Member

@i-am-the-slime i-am-the-slime commented Jul 28, 2020 •
edited
Loading

This adds keyframes for animations. Example:

rotatingKeyframes ∷ E.StyleProperty
rotatingKeyframes =
  E.keyframes
    { from: E.nested $ E.css { transform: E.str "rotate(0deg)"}
    , to: E.nested $ E.css { transform: E.str "rotate(360deg)"}

    }

containerStyle ∷ E.Style
containerStyle =
  E.css
    { width: E.str "100%"
    , height: E.str "100%"
    , animationName: rotatingKeyframes
    , animationDuration: E.str "2s"
    , animationIterationCount: E.str "infinite"
    }

Closes #7

@i-am-the-slime
Copy link
Member Author

I also exported global, because it was private.

maddie927
maddie927 approved these changes Jul 28, 2020
View reviewed changes
Copy link
Member

@maddie927 maddie927 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thank you

@maddie927 maddie927 merged commit e8238e6 into purescript-react:main Jul 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@maddie927 maddie927 maddie927 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

How to deal with keyframes?
2 participants
@i-am-the-slime @maddie927