Similar Topics...
 |
Repeat CSS Animation on Click
When you set a css class name to an object on click to start an animation, the animation will not fire on subsequent clicks unless you remove the css class name you added after the animation has completed.
Sample CSS Animation:
/* save animation */
@keyframes animateSave {
0% { background-color: yellow; }
50% { background-color: green; }
}
.saveAnimation {
display: inline-block;
animation: animateSave 400ms 1; /* use myanimation 400ms duration, 1 times */
}
C# Script Provider to set css class to blank
(If you are not familiar with the script providers design pattern, look up equivalent JS or use JQuery)
ScriptProvider spResetCss = new ScriptProvider();
spResetCss.SetCssClassName(myButton, "");
C# Script Provider to fire up the animation and then reset class
ScriptProvider sp = new ScriptProvider();
sp.SetCssClassName(myButton, "saveAnimation");
// need to put class back after animation so it can repeat
sp.CallFunction("setTimeout", JavaScriptUtility.QuoteText(spResetCss.ToString()), "500");
myButton.SetScriptProvider(sp, ScriptProviderType.ONCLICK);
Created By: amos 3/11/2015 11:46:31 AM
Updated: 3/11/2015 11:47:29 AM
|
|
|
|
|
|