如何通過jQuery強制應用CSS過渡效果/動畫

Question

引導已被用於Web應用程序。側欄抽屜/導航的切換導航應該默認爲動畫（因爲引導切換導航是動畫的）。但不幸的是，沒有動畫。所以，我已經申請這樣的：

.navbar-collapse { 
    width: 0; 
    opacity: 0; 
    transition: width 0.3s ease; 
} 
.navbar-collapse.expanded-menu.in { 
    width: 95%; 
    opacity: 1; 
} 

它的工作是擴大側邊欄的時間，但在關閉它沒有工作的時間。如果我應用這個jQuery，它不會幫助更火。

$('body').on('click', '.navbar-toggle', function() { 
     $('.expanded-menu.in').animate({"width":"95%"}, 500); 
}); 
$('body').on('click', '.close', function() { 
     $('.navbar-toggle').click(); 
     $('.expanded-menu').animate({"width":"0px"}, 500); 
}); 

那麼，如何在這種情況下通過jQuery/CSS強制應用動畫/滑動效果。

Fiddle Work

N.B：如果我從我的CSS刪除opacity，在小提琴的滑動效果的工作。但是，在我的Web應用程序中，在關閉側邊欄時無法正常工作。所以，當默認的CSS/jQuery方法不起作用時，我需要知道如何應用動畫/滑動效果。

Answer 1

更改CSS來：

transition: all 0.3s ease; 

和JS

$('body').on('click', '.close', function() { 
    $('.navbar-collapse').removeClass('in'); 
}); 

，我會說我不是，爲什麼CSS變化工作，因爲我不知道底細完全清楚BS JS