如何通过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