JSFiddle - React, Tailwind, and code Playground

by chucknelson

HTML

<div id="main-container">
    <p class="title">List of Link Items</p>
    <ul id="my-list">
        <li class="flipper">
            <div class="front">
                <div class="item-links">
                    <a href="#" class="item-link">Item 1</a>
                    <a href="#" class="item-action">(action)</a>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div class="back">
                <div class="item-links">
                    <a href="#" class="item-link complete">Item 1 Complete</a>
                    <a href="#" class="item-action">(action)</a>
                </div>
                <div style="clear: both;"></div>
            </div>
        </li>
    </ul>
</div>

CSS

#main-container {
    width: 100%;
    -webkit-perspective: 800px;
}

p {
    margin: 0;
}

p.title {
    background-color: #eee;
}

ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

li {
    min-height: 3em;
    border-bottom: 1px solid black;
    overflow: hidden;
}

li.flipper {
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 100% 1.5em;
}

li div.front, div.back {
    position: absolute;
    width: 100%;
    -webkit-backface-visibility: hidden;
}

.item-links {
}

li div.front {
    background-color: orange;
    z-index: 1;
}

li div.back {
    background-color: red;
    -webkit-transform: rotateX(180deg);
}

li a {
    display: inline-block;
    padding: 1em 0;
}

li a.item-link {
    float: left;
    width: 90%;
}

li a.item-action {
    float: left;
    width: 10%;
}

li:first-child {
    border-top: 1px solid black;
}

.complete a {
    text-decoration: line-through;
}

.animated {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
}

.flipped {
    border-top: 1px solid black;
    //min-height: 1.5em;
    //background-color: #555;
    
    -webkit-transform: rotateX(180deg);
}

.flipped:not(:first-child) {
    border-bottom: none;
}

JavaScript

//List of links using and actions (using front/back) with sorting and flip animations
//TO FIX: action should be vertically aligned regardless of tall the list item is
//TO FIX: The clickable link area is only the top half of the list item after a flip...why?
//TO FIX: Can I shrink these list items without borders and alignment breaking?
$(function() {
    $('ul').on('click', 'li a', function(event) {
        listItem = $(this).parent().parent().parent();
        listItem.addClass('animated');
        listItem.toggleClass('flipped');
    });
    
    $('ul').on('webkitTransitionEnd', 'li', function(event) {
        $(this).removeClass('animated');
    });
    
    $('ul').sortable({
        start: function(event, ui) {
        },        
        stop: function(event, ui) {
        },
        update: function(event, ui) {
        }
    });
});