Add levitate on hover

Author: erwstout

ReactCardFlipper.css

@@ -8,6 +8,7 @@
   transform-style: preserve-3d;
   width: auto;
   height: auto;
+  transition: transform 500ms cubic-bezier(.18,.45,.11,.91);
 }
 
 .rcf-front, .rcf-back {
@@ -38,6 +39,11 @@
   transform: rotateY(180deg);
 }
 
+.rcf-levitate {
+  transform: translateY(-15px);
+  transition: transform 500ms cubic-bezier(.18,.45,.11,.91);
+}
+
 /* IE Support for 11-10 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .rcf-active .rcf-back {

ReactCardFlipper.js

@@ -10,6 +10,7 @@ import './ReactCardFlipper.css';
   * Width: string (default: auto)
   * Height: string (default: auto)
   * behavior: click, hover (default: click)
+  * levitate: boolean (default: false, only works when clicked)
 **/
 
 class ReactCardFlipper extends Component {
@@ -20,11 +21,13 @@ class ReactCardFlipper extends Component {
       isFlipped: false,
       width: this.props.width,
       height: this.props.height,
-      behavior: this.props.behavior ? this.props.behavior : 'click'
+      behavior: this.props.behavior ? this.props.behavior : 'click',
+      levitate: this.props.levitate ? this.props.levitate : false
     }
 
     // bind this 🤙
     this.handleFlip = this.handleFlip.bind(this);
+    this.handleMouseEvent = this.handleMouseEvent.bind(this);
   }
 
   handleFlip(e) {
@@ -34,15 +37,29 @@ class ReactCardFlipper extends Component {
     })
   }
 
+  handleLevitate(e) {
+    e.currentTarget.classList.toggle('rcf-levitate');
+  }
+
+  handleMouseEvent(e) {
+    if( this.state.behavior === 'hover' ) {
+      return this.handleFlip(e);
+    } else if ( this.state.behavior === 'click' && this.state.levitate ) {
+      return this.handleLevitate(e);
+    } else if ( this.state.behavior === 'click' ) {
+      return
+    }
+  }
+
   render(){
     const containerStyles = {
       width: this.state.width,
       height: this.state.height,
     }
 
     return(
-      <div className="rcf-container" style={containerStyles} onClick={ (e) => { if(this.state.behavior === 'click'){ this.handleFlip(e) }}} onMouseEnter={ (e) => { if(this.state.behavior === 'hover'){ this.handleFlip(e) }}}
-        onMouseLeave={ (e) => { if(this.state.behavior === 'hover'){ this.handleFlip(e) }}}>
+      <div className="rcf-container" style={containerStyles} onClick={ (e) => { if(this.state.behavior === 'click'){ this.handleFlip(e) }}} onMouseEnter={ (e) => { this.handleMouseEvent(e) }}
+        onMouseLeave={ (e) => { this.handleMouseEvent(e) }}>
         <div className="rcf-flipper">
           <div className="rcf-front" style={containerStyles}>
             {this.props.children[0]}

Test.js

@@ -22,6 +22,14 @@ ReactDOM.render(
             Great job! You win person of the day.
           </div>
         </ReactCardFlipper>
+        <ReactCardFlipper width="300px" height="400px" behavior="click" levitate={true}>
+          <div className="text-center">
+            You can click me, and I levitate
+          </div>
+          <div className="text-center">
+            Great job! You win person of the minute.
+          </div>
+        </ReactCardFlipper>
       </div>
     </div>
   </div>,

tests/tests.css

@@ -4,7 +4,7 @@
 
 .rcf-container {
   display: inline-block;
-  margin: 0 20px;
+  margin: 10px 20px;
 }
 
 .rcf-front, .rcf-back{