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