<div class="box" style="height:140px;">
        <div class="transition-box" onclick="
            $('.transition1').css('display','block');
            $('.transition1').css('height','60px');">
            <div class="com-block transition transition1">transition</div>
        </div>
        <div class="transition-box" onclick="
        $('.transition2').css('display','block'); 
        setTimeout(function(){$('.transition2').css('height','60px');},0)">
            <div class="com-block transition transition2">transition</div>
        </div>
        <div class="btns">
            <button onclick="$('.transition').css({'display':'none','height':'30px'})">reset</button>
        </div>
    </div>
.box{
    width: 100%;
    // height: 100px;
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #999;
}
.item{
    cursor: pointer;
}
.com-block{
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: red;
    margin-bottom: 10px;
}
.transition-box{
    float: left;
    width: 120px;
    height: 80px;
    padding: 10px;
    border: 1px solid #000;
    margin-right: 20px;
}

.transition{
    display: none;
    width: 100px;
    text-align: center;
    height: 30px;
    transition: height 2s;
}
Rerun