jquery - 如何通过 jQuery 强制应用 CSS 过渡效果/动画

Question

Bootstrap 已被用于 Web 应用程序。侧边栏抽屉/导航有切换导航，默认情况下应该是动画的(因为 Bootstrap 切换导航是动画的)。但是，不幸的是，没有动画。所以，我应用了这个:

.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，滑动效果就不起作用了。但是，在我的网络应用程序中，它在关闭侧边栏时无论如何都不起作用。所以，我需要知道如何在默认 CSS/jQuery 方法不起作用时应用动画/滑动效果。

Answer 1

将 CSS 更改为:

transition: all 0.3s ease;

和JS

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

我会说我不完全清楚为什么 css 更改有效，因为我不知道 BS JS 的来龙去脉