JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<h1>CSS Transition</h1>

<img class="card turnCSS" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turnCSS" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turnCSS" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />

<h1>Compatible</h1>

<img class="card turnCompatible" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turnCompatible" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turnCompatible" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />

<h1>With feature check</h1>

<img class="card turn" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turn" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
<img class="card turn" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />

CSS

.card {
    width:50px;
    height:80px;
    -webkit-transition:-webkit-transform 0.5s;
    transition:transform 0.5s;
    background:#FF0;
}
.flipping {
    transform: translate(0, 20px) rotateY(90deg);
    -webkit-transform: translate(0, 20px) rotateY(90deg);
}

JavaScript

var CARDWIDTH = 50;

function turnCompatible(elem, class) {
    $(elem).animate({
        width: 0,
        marginLeft: CARDWIDTH / 2,
        marginRight: CARDWIDTH / 2
    }, function () {
        this.class = class
        $(this).animate({
            width: CARDWIDTH,
            marginLeft: 0,
            marginRight: 0,
        })
    })
}

function turnCSS(elem, src) {
    $(elem)
        .addClass("flipping")
        .bind("transitionend webkittransitionend", function () { //should add more prefixes
        this.src = src;
        $(this)
            .unbind("transitionend webkittransitionend")
            .removeClass("flipping")
    })
}

function turn(elem, src) {
    if (
    elem.style.transition === "undefined" && //should add more prefixes
    elem.style.webkitTransition === "undefined") {
        turnCompatible(elem, src)
    } else {
        turnCSS(elem, src)
    }
}


var front = "http://mauricederegt.com/test/solitaire/cards/Kc.jpg"
var back = "http://mauricederegt.com/test/solitaire/cards/back.jpg"
$(".turnCSS").click(function () {
    var class = this.class == back ? front : back; //for toggling fun
    turnCSS(this, class)
})

$(".turnCompatible").click(function () {
    var class = this.class == back ? front : back; //for toggling fun
    turnCompatible(this, class)
})

$(".turn").click(function () {
    var class = this.class == back ? front : back; //for toggling fun
    turn(this, class)
})