Nativescript- resume event css animation -
i have page using infinitely running css animation gridlayout components. runs correctly when app first loads, if switch app , come (which triggers resume event), css animation stops running.
markup is:
           <gridlayout class="dc">             <gridlayout class="animatingdc"/>              <gridlayout class="animatingdc2"/>              <gridlayout class="animatingdc3"/>              <stacklayout class="p-20">                 <label .../>                 <label .../>             </stacklayout>         </gridlayout> the css rotates grid-layout boxes infinitely while changing color css is:
.dc {     background-color: #a9c68a;     animation-name: containerchange;     animation-duration: 11s;     animation-timing-function: ease;     animation-iteration-count: infinite;     animation-direction: alternate-reverse; }  .animatingdc {     background-color: #f9c68a;     animation-name: gradientchange;     animation-duration: 10s;     animation-timing-function: linear;     animation-iteration-count: infinite;     animation-direction: alternate;     transform: rotate(0deg) scale(1);     opacity: 0.7; }  .animatingdc2 {     background-color: #f9cffa;     animation-name: gradientchange;     animation-duration: 8s;     animation-timing-function: ease-in-out;     animation-iteration-count: infinite;     animation-direction: reverse;     transform: rotate(0deg) scale(1);     opacity: 0.7; }  .animatingdc3 {     background-color: #a9cffa;     animation-name: gradientchange;     animation-duration: 10s;     animation-timing-function: ease-in-out;     animation-iteration-count: infinite;     animation-direction: reverse;     transform: rotate(-90deg) scale(1);     opacity: 0.7; }  @keyframes gradientchange {     0% {         background-color: #f9c68a;         transform: rotate(0deg) scale(1);     }     50% {         background-color: #f77378;         transform: rotate(180deg) scale(1.2);     }     100% {         background-color: #f9c68a;         transform: rotate(-360deg) scale(1);     } } i don't know how fix this. have tried asking page re-layout itself, adding dummy classes etc try hack restart animation, none of worked. behaviour same in both andriod , ios.
could tell me how fix this? don't want manually animate elements.
 
 
Comments
Post a Comment