slidein

by kazu69

HTML

<table>
    <tbody>
        <tr>
            <td>current</td>
            <td>000</td>
        </tr>
    </tbody>
</table>
<hr>
<a href="#" id="add">add row</a>

SCSS

table {
    width: 80px;
    border: 1px solid #eee;
}

tr {
    background-color: #fefefe;
    height: 30px;
    position:relative;
}

.new-mail {
    position:absolute;
    left: 100px;
}

.slide-in {
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s; 
     transition-duration: .2s; 
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    left: auto;
}

#add {
    border: 1px solid #ddd;
    background: #eee;
    padding: .3em .4em;
    text-align: center;
    text-decoration: none;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    border-radius: 2px;
}

CoffeeScript

addCell = ->
 html = "<tr class='new-mail'><td>add</td><td>123</td></tr>"
 
 $("table").height($("table").height() + 30)
 $("table").find("tr:first").parent().prepend html
 $("table").find(".new-mail").on "webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ->
    $("table").find(".new-mail").removeClass("new-mail slide-in")
 setTimeout  ->
    $("table").find(".new-mail").addClass("slide-in")
 , 1 
    
  

$("#add").on "click", (e) ->
  e.preventDefault()
  
  addCell()