JQuery Style Transition

HTML

<button>CLICK ME!</button>

<div class="green"></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: blue; 
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
.green {
    width: 100px;
}
.orange {
    width: 200px;
    background: orange;
}

JavaScript

$('button').click( function() {
    
    if( $('div').hasClass('green') ) {
        
        $('div').removeClass('green');
    
        $('div').addClass('orange');
        
    } else {
     
        $('div').removeClass('orange');
    
        $('div').addClass('green');
        
    }
        
});