Skip to content
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.

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

Rerendering causes the same animation to be added to the header several times. #16

Open
szagi3891 opened this issue Dec 23, 2020 · 5 comments
Assignees

Comments

@szagi3891
Copy link
Collaborator

szagi3891 commented Dec 23, 2020

<style>
@keyframes sk-scaleout { 
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
         }
 </style>
 <style>
@keyframes sk-scaleout { 
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
         }
 </style>
 <style>
@keyframes sk-scaleout { 
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
         }
 </style>
 ...
@szagi3891
Copy link
Collaborator Author

szagi3891 commented Dec 23, 2020

Current version:

    node("div", vec!(
        css(Css::one("
            width: 40px;
            height: 40px;
            background-color: #d26913;

            border-radius: 100%;
            -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
            animation: sk-scaleout 1.0s infinite ease-in-out;
        ")),

        cssFrames(CssFrames::new("sk-scaleout", "
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
        ")),
    ))

Possible solution, draft:

    node("div", vec!(
        css(Css::one("
            width: 40px;
            height: 40px;
            background-color: #d26913;

            border-radius: 100%;
            animation: 1.0s infinite ease-in-out {
                0% {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                } 100% {
                    -webkit-transform: scale(1.0);
                    transform: scale(1.0);
                    opacity: 0;
                }
            };
        ")),
    ))

@szagi3891
Copy link
Collaborator Author

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
p {
  animation-duration: 3s;
  animation-name: {
    from {
      margin-left: 100%;
      width: 300%;
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }
}


@szagi3891
Copy link
Collaborator Author

        cursor: pointer;

        &:hover {
            color: red;
        }

@szagi3891
Copy link
Collaborator Author

        cursor: pointer;

        hover: {
            color: red;
        };
        

@szagi3891
Copy link
Collaborator Author

fn custom_css() -> Css {
    Css::one("
        width: 40px;
        height: 40px;
        background-color: #d26913;

        border-radius: 100%;
        animation: 1.0s infinite ease-in-out {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
        };
        animation-name: {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
        };
        hover: {
            color: red;
        };
        background-color: blue;
    ")
}

@szagi3891 szagi3891 self-assigned this Jan 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant