feat: animate rewind button (#145)

Toggle animation when clicking on rewind button.
kaltura · Nov 28, 2017 · de2b222 · de2b222
1 parent 899e69c
commit de2b222
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/src/components/rewind/rewind.js b/src/components/rewind/rewind.js
@@ -38,6 +38,7 @@ class RewindControl extends BaseComponent {
    * @memberof RewindControl
    */
   onClick(): void {
+    this.animate();
     const step = this.props.step || DEFAULT_STEP;
     if (this.player.currentTime - step < 0) {
       this.player.currentTime = 0;
@@ -46,6 +47,18 @@ class RewindControl extends BaseComponent {
     }
   }
 
+  /**
+   * toggles the animation state to activate the rotate animation
+   *
+   * @returns {void}
+   * @memberof RewindControl
+   */
+  animate(): void {
+    this.setState({animation: false});
+    this.forceUpdate();
+    this.setState({animation: true});
+  }
+
   /**
    * render component
    *
@@ -60,7 +73,7 @@ class RewindControl extends BaseComponent {
           <button
             tabIndex="0"
             aria-label={<Text id={'controls.rewind'}/>}
-            className={style.controlButton}
+            className={`${style.controlButton} ${this.state.animation ? style.rotate : ''}`}
             onClick={() => this.onClick()}
             onKeyDown={(e) => {
               if (e.keyCode === KeyMap.ENTER) {

diff --git a/src/styles/_control-button.scss b/src/styles/_control-button.scss
@@ -50,3 +50,55 @@
     position: relative;
   }
 }
+
+.rotate {
+  -moz-animation: spin .3s 1 linear;
+  -o-animation: spin .3s 1 linear;
+  -webkit-animation: spin .3s 1 linear;
+  animation: spin .3s 1 linear;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(359deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+  }
+}
+
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(359deg);
+  }
+  100% {
+    -moz-transform: rotate(0deg);
+  }
+}
+
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(359deg);
+  }
+  100% {
+    -o-transform: rotate(0deg);
+  }
+}
+
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(359deg);
+  }
+  100% {
+    -ms-transform: rotate(0deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(359deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}