Question

Bootstrap已在Web应用程序中使用。侧边栏抽屉/导航的切换导航默认情况下应设置动画（因为引导切换导航是动画的）。但不幸的是，没有动画。所以，我申请了这个：

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

它在扩展侧边栏时起作用，但在关闭时它不起作用。如果我应用这个jQuery，它将无助于eighter。

$('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的来龙去脉

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

1 个答案: