search

vertigo-web / vertigo

Reactive WebAssembly
Apache License 2.0
21 stars 3 forks source link

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

Open szagi3891 opened 3 years ago

szagi3891 commented 3 years ago 
<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 commented 3 years ago

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 commented 3 years ago 
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 commented 3 years ago 
        cursor: pointer;

        &:hover {
            color: red;
        }
szagi3891 commented 3 years ago 
        cursor: pointer;

        hover: {
            color: red;
        };
szagi3891 commented 3 years ago 
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;
    ")
}